Jump to content
Search Community

Help with migrating 'staggerTo'

Mattrudd test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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!!!

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...