DevC Posted February 3, 2023 Share Posted February 3, 2023 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 Link to comment Share on other sites More sharing options...
DevC Posted February 3, 2023 Author Share Posted February 3, 2023 Does it make sense for the hero to have a tween it's own? Will scrolltrigger handle things from there? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 3, 2023 Share Posted February 3, 2023 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! Link to comment Share on other sites More sharing options...
DevC Posted February 3, 2023 Author Share Posted February 3, 2023 @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. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 3, 2023 Share Posted February 3, 2023 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now