Translating ScrollMagic/GSAP animation to ScrollTigger

[studioalloy]

I'm trying to translate the animation I've build using GSAP and ScrollMagic to just use the ScrollTrigger library from GSAP it self. I thought this would be straight forward, but I'm not getting the same feel and also having multiple items trigger at the same time is not working 

 

Here is where I'm at (the clouds should also move down):

See the Pen XWXrLNz by mvaneijgen (@mvaneijgen) on CodePen

 

The ScrollMagic version:

See the Pen abvgBEK by mvaneijgen (@mvaneijgen) on CodePen

[ZachSaucier]

Hey mvaneijgen. It seems that you just didn't use the same values as you did in the ScrollMagic one. Using the same values gives you a similar result:

See the Pen MWKgMGO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

10 minutes ago, mvaneijgen said:

also having multiple items trigger at the same time is not working 

What do you mean?

 

Side notes:

• Generally speaking it's best to let GSAP completely control the transforms of elements that you're animating so that it has all of the information it needs. So I might set the initial transforms of those elements in GSAP.
• If you have multiple elements that you want to share the same scroll effect, why not add the ScrollTrigger to a timeline where both tweens are added instead? For example

  const parallaxTL = gsap.timeline({
    scrollTrigger: {
      trigger: "header",
      scrub: 1,
      start: "top top",
      end: "+=1000",
    }
  });
  parallaxTL
    .to("header .svg-group .building", { y: 100 })
    .to("header .svg-group .clouds", { y: 200 })

   

[studioalloy]

Yeah I was starting from scratch and the same settings got me different results that is why I set it to `.from()` instead of `.to()` 

 

I see you also changed my `y: "100%"` to `yPercent: 100,`, why is that because with my original `y` the building just disappears. https://www.diffchecker.com/M2bbwxxr

 

Letting the transform being handled by GSAP is a good idea, but I usually first build the layout before I do any animation. What will the impact of the performance be if the transforms are already being set?

 

I swear I tried that last one, but it didn't work for me. I do however had set the `scrollTrigger` object on the elements it self, but that didn't work. Also how do you need to see this timeline, because if I visualise a normal animation on GSAP I visualise a timeline which is being played one after the other. if I see your example I would say the building scrolls down first and after that the clouds, but I want the building and clouds play at the same time and if they are both done have the ground disappear, would than adding a custom label to the timeline work? This is just to better understand the way it works. (just tested it and that is exactly how it works!)

 

```

parallaxTL
  .to("header .svg-group .building", { y: 100 }, "sameTime")
  .to("header .svg-group .clouds", { y: 200 }, "sameTime")

  .to("header .svg-group .foliage", { scale: 0 })

```

[ZachSaucier]

5 hours ago, mvaneijgen said:

I see you also changed my `y: "100%"` to `yPercent: 100,`, why is that

It's more convenient and also lets you more easily combine percentages with pixel values (so you could, for example, have an offset set with y but animate yPercent if you'd like).

 

5 hours ago, mvaneijgen said:

I usually first build the layout before I do any animation. What will the impact of the performance be if the transforms are already being set?

It's not so much a performance issue as it is a logical one. Browsers don't report transforms in anything other than pixels so if you have something set in percent GSAP may not be able to know that. GSAP does it's best to detect common percentages and convert it for you but sometimes it's not able to reliably do that. It might make sense to build the layout as you normally do but then convert the parts to GSAP that will be animated.

 

5 hours ago, mvaneijgen said:

I see your example I would say the building scrolls down first and after that the clouds

Oops, good catch. I meant to put 0 in the position parameter for the clouds tween:

.to("header .svg-group .clouds", { y: 200 }, 0)

A label would work also but is more work than you need in this case.