Fire an animation in hero then let scrolltrigger take over

[DevC]

I have a fixed element that animates when it enters certain sections `.gradientTrigger`. Even after adding this class to the hero I'm not getting desired result. I'd like to call the animation on load and then let scrolltrigger do it's business on scroll.

See the Pen VwBVdom by dcha (@dcha) on CodePen

[DevC]

Does it make sense for the hero to have a tween it's own? Will scrolltrigger handle things from there?

[Rodrigo]

Hi,

 

I'm not seeing anything that adds a class to the gradient element or animating it in any way, also I don't see a hero element of any kind. There is a vh-hero class in the CSS but that's all I see.

 

You could use the DOM Content Loaded or load events for this:

https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

 

You could setup one of those events in order to animate the gradient bar or add/toggle a class to the element.

 

8 minutes ago, DevC said:

Does it make sense for the hero to have a tween it's own? Will scrolltrigger handle things from there?

If you want to toggle the bar animation:

let bar = gsap.timeline({ paused: true });
bar.to(".GradientBar", {
  translateY: 0
});

As I mentioned before, you could set up a specific loaded event to play that animation and then manage it with ScrollTrigger on each section as it's already working, since every section basically plays/reverses the bar animation.

 

As I mentioned before is not clear to me what exactly you're trying to do so a little clarification or a more explicit example would be great.

 

Let us know if you have more questions.

Happy Tweening!

 

[DevC]

@Rodrigo Ah, missed that. Yea, so the 'hero' should just have the same animation the other sections have - the bar translates upward. It seems this actually works just fine with the right combo of start and end. Thanks for having a look.

[Rodrigo]

Hi,

 

I don't see any hero element and/or animation in your codepen example. Code-wise is not clear to me what you're trying to do. Based on your description I don't know what possible approach could be the best:  if creating a ScrollTrigger instance for the hero to show/hide the bar or use a loaded event to show the bar.

 

Please be as explicit as you can about what are you trying to do and reflect your attempts in a minimal demo.

 

Happy Tweening!