Dominique Posted March 2, 2022 Share Posted March 2, 2022 Dear all, I would like to use ScrollTrigger combined with a timeline in order to show every div with the class "step" this way: as they appear, the opacity increases, and then, as they disappear from the viewport, the opacity decreases. I've tried with this script : panel_tl = gsap.timeline(); panel_tl.from(".step", {opacity: 0, duration: 0.5}); panel_tl.to(".step", {opacity: 0, duration: 0.5}); gsap.utils.toArray(".step").forEach(function (panel) { ScrollTrigger.create({ animation: panel_tl, trigger: panel, start: "top 90%", end: "bottom 10%", scrub: true, markers: true, toggleActions: "resume pause reverse pause" }) }); However, any .step div that enters the viewport creates the timeline for all of them. How can I address just one single .step div at a time, with an in and out effects? Thank you very much for your help, Dominique See the Pen LYzGmjb by dnauroy (@dnauroy) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted March 2, 2022 Share Posted March 2, 2022 Hi @Dominique I think this should work for you. See the Pen BamvjpO by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
Dominique Posted March 2, 2022 Author Share Posted March 2, 2022 Brilliant ! Thank you so much for your help ! Link to comment Share on other sites More sharing options...
Dominique Posted March 2, 2022 Author Share Posted March 2, 2022 Hello again @PointC, Your code works like a charm. But it doesn't seem like the duration property changes anything. I've tried to modify it from 0.1 to 5 without any significant effect, even rewriting it this way: panel_tl.fromTo(panel, { opacity: 0 }, { opacity: 0, duration: 5 }); Would you have any hint? Link to comment Share on other sites More sharing options...
PointC Posted March 2, 2022 Share Posted March 2, 2022 You have scrub:true on the ScrollTriggers. If you want a specific duration, you'd need to remove that. Right now you have two tweens on the timeline each with a duration of 0.5. So 50% of the scroll distance will be the first tween and 50% for the second. You could set them both to 100 seconds and get the same result with scrub set to true. Make sense? You may also want to use ease:"none" since these are opacity tweens linked to the the scrub. Happy tweening. 2 Link to comment Share on other sites More sharing options...
Dominique Posted March 2, 2022 Author Share Posted March 2, 2022 It definitely makes sense! Great, thanks again a lot @PointC 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now