Update scrolltrigger depending parent div

[IndM]

I don't really have a codepen for it because it's a thought process.

What I have is a horizontal scroll timeline. In an other file I have some text animations.

Now here comes the question; How do I update those text animations scrollTrigger with containerAnimation:horizontalTimeLineFromOtherFile only to the textelements inside that horizontal timeline?

The same text animations are being used to elements on the same page but not inside that horizontal timeline for example.

[mvaneijgen]

If I read your question I'm not sure how this will work, but the beauty of GSAP is you can build anything you want, you just have to put in the work to get there. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

The great thing about minimal demo's is others can see your thought process (even if the pen is not working) and this will allow them to quickly come up with solutions how it could be improved. This way of sharing your work will greatly improve your chance of getting a good answer. 

 

The only thing that springs to mind is this demo from the https://greensock.com/st-demos/ page. Hope it helps and happy tweening! 

 

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

 

[Cassie]

Yep, following the containerAnimation pattern above, you may be able to use callbacks? If I understand correctly that is!
 

ScrollTrigger.create({
  trigger: ".myTextAnimationTrigger",
  containerAnimation: scrollTween,
  start: "left center",
  onEnter: () => textAnimation.play()
})

 

[IndM]

Hi y'all!

I've tried to put it into a codepen so you would have a better vision what i mean.
@Cassie So what you done is actually creating a scrolltrigger on top of an other scrolltrigger just to update it right?

See the Pen jOQGBKY?editors=1010 by indy-meermans (@indy-meermans) on CodePen

[Cassie]

Sorry I don't know what you're doing there. Could you maybe start with a blank demo rather than a forked demo of ours that's broken?

There's a video and a detailed explanation of containerAnimation here that may help you to get your head around it. I'm suggesting using containerAnimation to fire off a callback that you could use to handle whatever you like!
 

 

[IndM]

I've updated the code and minified the content. The titles that should be animated are: "This title should also be animated!".
 

What I try to achieve is to have a global code to execute text animations, in this example is that the code for  'letter-slide-left', to also work in horizontal scroll code and when just scrolling the page. Without actually creating a new custom code for 'letter-slide-left' that only works in the horizontal scroll code for example.

(Some useful information)
That code is placed in a file named: text-animations.js
The horizontal scroll is placed in a file: horizontal-scroll.js
 

See the Pen jOQGBKY?editors=1010 by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

There are two things, there is the animation, this can be added to what ever you want. Best thing is to create a function that creates this animation based on a timeline and return that timeline to be used where ever.

 

Then you have to create your ScrollTrigger logic and connect that timeline animation to the ScrollTrigger. I've created a ScrollTrigger for each .panel.red and for your .description, you should also create a ScrollTrigger for you .final. These ScrollTriggers are not the same. Your horizontal animations need a containerAnimation property and your other animations don't need that, you probably want to have some other start end end values based on if the animation is horizontal or not, so that is why you have to create a ScrollTrigger for each animation you want to happen on scroll. 

 

You could create some elaborate function that checks all the logic it should have and also abstracts the ScrollTrigger creation, but I'll leave that up to you if you want to go that route (seems like a lot of work to me).

 

As you can see in the example  you can go multiple routes for creating ScrollTriggers with animations, you can create a timeline add ScrollTrigger to a timeline and then .add() some other timeline to that timeline (I heard you liked timelines, so I put timelines in your timelines!). Or you can create a ScrollTrigger.create() instance to which you connect an animation via the animation property. Hope it helps and happy tweening! 

 

See the Pen qBQVVJp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Yeah, I think the thing that's confusing me here is the 'global' / 'different files' / "not inside that horizontal timeline" bit? 

As long as the scrollTween is accessible from your other files this is just a standard containerAnimation. It would follow exactly the same pattern

[IndM]

@mvaneijgen Thanks!! That's exactly the thinking method I needed! This will help me on the right path.

@Cassie Whoops, I'm sorry 😬. It sounded clear in my head, but I can understand that it was not that clear for someone else. I thought that the timeline wouldn't be accessible anymore and that I had to create another trigger or something else to update that containerAnimation value. But I can perhaps export that function and import it where I need it, and follow the way of mvaneijgen.

This is the way 🖖

[Cassie]

Yeah, there's not really any functions that need exporting! Just want to make sure you understand the very basic part so you don't overcomplicate things

The horizontal animation just needs a name, and then that name can gets referenced wherever you need an animation to play in that container.

That's all ya need.

 

// keep a reference of the horizontal 'fake scrolling' animation so you can pass it around.
let myScrollTween = gsap.to(".container", {
  xPercent: -100 * (sections.length - 1),
  ease: "none", // <-- IMPORTANT!
  scrollTrigger: {
    trigger: ".container",
    start: "top top",
    end: "+=3000",
    pin: true,
    scrub: 0.5
  }
});

// now let's create an animation that triggers based on the horizontal fake-scroll:
gsap.to(".box", {
  y: -100,
  scrollTrigger: {
    trigger: ".box",
    start: "left center",
    containerAnimation: myScrollTween, // <-- Right here!!
  }
});

Have fun and good luck!