Trying to have a scroll triggered video as well as text alongside

[Vedant Shah]

In the given code, I'm attempting to create two synchronized animations using ScrollMagic. The first animation involves a video whose playback is controlled by scrolling, while the second animation is a text that flies in at a specific point in the video. To achieve this, I've used TweenMax and ScrollMagic, setting an offset value for the text animation to ensure it starts at the right moment. 

The issue I'm encountering is that on larger screens, the text animation comes in later than expected. I initially considered using the `triggerHook` value between 0 and 1 to address this problem, but it didn't provide the desired results. 

How can I make the offset value for the text animation dynamic, so that it starts at the right time, especially on larger screens?
 

let scene = new ScrollMagic.Scene({

  duration: 19000,

  triggerElement: intro, //video

  triggerHook: 0,

})

  .addIndicators()

  .setPin(intro)

  .addTo(controller);

 

const height = window.innerHeight;

 

const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height });

let scene2 = new ScrollMagic.Scene({

  duration: 3000,

  triggerElement: intro,

  triggerHook: 0,

})

  .setTween(textAnim)

  .addTo(controller);

 

// Calculate the offset based on scene's duration

let scene3Offset = scene.duration() * 0.315 - 1000; // 31.57% of scene's duration

 

const textAnim2 = TweenMax.fromTo(

  text2,

  4,

  { y: height },

  { y: -1.5 * height }

);

let scene3 = new ScrollMagic.Scene({

  duration: 3000,

  triggerElement: intro,

  triggerHook: 0, 

  offset: scene3Offset,

})

  .setTween(textAnim2)

  .addTo(controller);

[mvaneijgen]

Hi @Vedant Shah welcome to the forum!

 

ScrollMagic is a third party plugin that is not maintained or supported by GSAP. That said we do have our own plugin called ScrollTrigger (https://gsap.com/docs/v3/Plugins/ScrollTrigger/) which is fully integrated with GSAP, so if you want I would suggest using that plugin, but everyone is free to choose what ever tools they like, we don't force any, but then we can't provide support for it. 

 

TweenMax is also really old syntax, which has not been used since version 2 of GSAP and we're currently at version 3.12.2, so I would not recommend using that syntax. instead of TweenMax and TweenLite you can now just call gsap.to(), gsap.from() and gsap.fromTo() for every tween. 

 

And if I read your code and understand your question I would just create a timeline with all the animations on it and then hook that up to scroll using ScrollTrigger, so don't create two separate tweens with each their own scroll effect. That makes things much simpler. 

 

You can also get rid of a few .fromTo() animations GSAP is smart and just gets the initial value of an element and can animate from there. Eg y: 0 is the default of an element, so yo don't need to set it. 

 

// This becomes the follwing
const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height });

// GSAP V3 syntax with a .to() tween, 
const textAnim = gsap.to(text1, { duration: 3, y: -1.5 * height });

Check out this tutorial how to work with ScrollTrigger 

 

With this feedback I hope you can just fix your issue. If not please provide a minimal demo, see the Codepen below, this loads all the GSAP plugins, so that you can just focus on creating your animation. Hope it helps and happy tweening! 

 

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

Maybe this thread can help:

 

Happy Tweening!