Mattrudd Posted September 16, 2022 Share Posted September 16, 2022 Hi wearers of the green foot cover... I've hit the extent of my less than considerable GSAP knowledge once again - trying to migrate a pice of code I've stolen from TweenMax to GSAP 3. The issue is in the staggerTo section - I've read through the migration docs and tried to find similar examples but not been able to work it out. Tried replacing the two 'tl2.staggerTo's with just 'tl2.to' as instructed, but then I get an error with the last two lines of the timeline, which are already 'tl2.to'. Thinking it needs reformatting to work as intended but not sure how? Incidentally - what's strange is the sequence works fine on Codepen, despite the deprecated code, but not locally via VS Code (which throws up deprecated errors) //// MIGRATION ISSUE! //// let tl2 = gsap.timeline({paused: true}); tl2.staggerTo("line", 0.4, {drawSVG:true, ease:Power2.easeIn}, 0.25, "lineStart"); tl2.staggerTo("line", 0.4, {drawSVG:"100% 100%", ease:Power2.easeOut}, 0.25, "lineStart+=0.25"); tl2.to("#slide1", 1, {x:-13, y:9, ease:Circ.easeOut}, "lineStart+=0.25"); tl2.to("#slide2", 1, {x:11, y:6.5, ease:Circ.easeOut}, "lineStart+=0.5"); ScrollTrigger.create({ trigger: ".text-container", start:document.documentElement.clientHeight * 1.6, toggleActions:"play none none reverse", animation:tl2, }) Thanks as ever! See the Pen VwxpaVw by matt-rudd (@matt-rudd) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 16, 2022 Solution Share Posted September 16, 2022 Hi @Mattrudd, Does this works in the way you expected: let tl2 = gsap.timeline({paused: true}); tl2 .to("line", {duraion: 0.4, drawSVG:true, ease:"power2.in", stagger: 0.25}, "lineStart") .to("line", {duraion: 0.4, drawSVG:"100% 100%", ease:"power2.out", stagger: 0.25}, "lineStart+=0.25") .to("#slide1", {duraion: 1, x:-13, y:9, ease:"circ"}, "lineStart+=0.25") .to("#slide2", {duraion: 1, x:11, y:6.5, ease:"circ"}, "lineStart+=0.5"); You should take some time to go through the docs in order to see how the latest syntax works and all the cool neat tricks the latest stagger config can do: https://greensock.com/docs/v3/Staggers https://greensock.com/docs/v3/GSAP/Tween https://greensock.com/docs/v3/GSAP/Timeline Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted September 29, 2022 Author Share Posted September 29, 2022 Realised I neglected to say thanks sooner @Rodrigo! 2 Link to comment Share on other sites More sharing options...
Cassie Posted September 30, 2022 Share Posted September 30, 2022 That's so nice of you to pop back in with some gratitude, thanks Matt 🥰 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