Comments (7)
Perhaps worth noting how to adjust timing: you can manually create animation keyframes and adjust their timing like below (change ease 0.2s
to your preferred timing)
// Using SASS
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
.slide {
opacity: 0 !important;
&:not(.is-selected){
animation: fadeOut ease 0.2s;
}
&.is-selected {
z-index: 99;
opacity: 1 !important;
animation: fadeIn ease 0.2s;
}
}
(I needed z-index, may not be neccessary for you - I haven't had time to see if this is from my own conflicts or not)
from flickity-fade.
For now if you want to set it yourself using CSS, set
opacity: 0 !important;
on all slides and
opacity: 1 !important;
on the selected slide.
You can then use CSS transition timing to adjust it to how you want.
from flickity-fade.
Funny you should ask because this exactly how fade transition speed works: with selectedAttraction
and friction
options. Flickity is hard-wired for sliding interaction, so there is no option to set a transition speed to a time duration though.
from flickity-fade.
FWIW, while adjusting selectedAttraction
and friction
works, I think using CSS for the fade effect would make it easier and more intuitive for people to adjust the timing and easing, and potentially more performant. If I ever get some free time at work I can try to submit a PR (unfortunately, that might be a little while).
Anyway, thanks for adding the fade functionality! 🎉
from flickity-fade.
I use the following css with the fade option to make it smoother. As can adjust the speed and transition style then.
.carousel-cell {
opacity: 0;
transition: opacity 1.5s ease-in-out;
z-index: 0;
width: 100vw;
height: 100%;
}
from flickity-fade.
I tried those, but they didn't seem to do anything for fade speed.
from flickity-fade.
@skillmatic-co If you set the selectedAttraction
to something like 0.001 you can see the difference. I'm unsure what friction
would do for a fade but selectedAttraction
definitely works 👍🏻
from flickity-fade.
Related Issues (18)
- wrapAround incompatibility with a 2-slide carousel HOT 30
- 2 image wrapAround flickers HOT 2
- Fade on desktop while slide on mobile HOT 1
- Fade autoplay stop working on click HOT 4
- Add: flickity-bg-lazyload and flickity-fade to CDNJS.
- Links and buttons inside a slide are being linked and positioned to different slides
- Flickity 2.3 + Fade 2.0 HOT 17
- Flickity fade slide error HOT 2
- Fade issue with negative progress HOT 1
- Slight flicker (no pun intended) between last and first slide when looping. HOT 5
- Flickity fade not working HOT 2
- NPM Usage Question HOT 2
- [Bower] Not installing HOT 1
- Mobile Safari doesn't always hide previously selected cells HOT 3
- Typescript Support HOT 2
- When using asNavFor, fade stops working (Webpack) HOT 4
- lazyLoad inclusion ignores fade (randomly)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flickity-fade.