Stonino82 Posted June 30, 2020 Share Posted June 30, 2020 I'm trying to get Scroll Trigger to start working right after the animation for .presentation on the first timeline. Is it correct to use 2 timelines? What is the best way to achieve it? Here is my code so far: //Animate the left-side var tl1 = gsap.timeline(); tl1.from(".presentation",{x: -500, duration: 1, opacity: 0}) .addLabel("article", "+=1") .from("h1", {y: 30, duration: .5, opacity: 0}) .from("h2", {y: 30, duration: .5, opacity: 0}, "-=0.3") .from(".presentation__icons--item", {y: 30, duration: .5, opacity: 0}, "-=0.3") .from(".presentation__resume", {y: 30, duration: .5, opacity: 0, stagger: 1}, "-=0.3") .from(".presentation__email", {y: 30, duration: .5, opacity: 0, stagger: 1}, "-=0.3"); //Animate the right-side gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray("article").forEach(box => { var tl2 = gsap.timeline({ scrollTrigger: { trigger: box, toggleActions: "play reverse play reverse", start: "-100px 80%", end: "80% 100px", markers: true } }); tl2.from(box, { y: 100, duration: .5, opacity: 0 }); }); Thank you very much. Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 30, 2020 Share Posted June 30, 2020 This would be the correct setup for setting up an animation separate from your scrollTriggers. (Also, you don't necessarily need a .timeline() for your second tweens.) To be noted: This setup will not prevent your ScrollTrigger tweens from being fired at the same time as your first timeline, as multiple timelines don't fall into succession. If you wanted to make sure the first timeline played before your scrollTriggers you could use an onComplete callback function on your first timeline to setup the scrollTriggered animations.. 1 Link to comment Share on other sites More sharing options...
Stonino82 Posted June 30, 2020 Author Share Posted June 30, 2020 As I'm not really familiar with GSAP, can you show me how to use the onComplete callback function? Link to comment Share on other sites More sharing options...
elegantseagulls Posted June 30, 2020 Share Posted June 30, 2020 You might find this useful: https://greensock.com/docs/v3/GSAP/Timeline/eventCallback() Also: See the Pen zYrPqpj by ryan_labar (@ryan_labar) on CodePen 3 Link to comment Share on other sites More sharing options...
Stonino82 Posted July 1, 2020 Author Share Posted July 1, 2020 Very helpful, thanks. 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