Antonio78 Posted April 4, 2022 Share Posted April 4, 2022 Hi, I've been trying to do a simple scrollTrigger action: an elements that enters the viewport makes another element fade out, that's it. But this time the action starts on page load and not when my triggers pass the scroller-start. This is my code. I tried to set a longer duration to see what happens but the #header_logo starts at opacity 0 without tweening, as If I had set gsap.set instead of gsap.to. Do you see anything wrong with my code? Thank you. ScrollTrigger.create({ trigger: '#logo_footer', start: 'top 80%', end: 'bottom 20%', animation: gsap.to('#header_logo', {duration: 1, autoAlpha: 0}), markers: true }) Link to comment Share on other sites More sharing options...
OSUblake Posted April 4, 2022 Share Posted April 4, 2022 Hi Antonio, If you need help, please provide a minimal demo. Thanks! Link to comment Share on other sites More sharing options...
Antonio78 Posted April 4, 2022 Author Share Posted April 4, 2022 2 hours ago, OSUblake said: Hi Antonio, If you need help, please provide a minimal demo. Thanks! Hi OSUblake, It's not easy to provide a demo but I can show you the website, hope it helps. The #header_logo element should be hidden at start, then become visibile after 200px scrolling, then fade out when #logo_footer enters the viewport at 80%. The code is in main.js at line 196. Thank you. Link to comment Share on other sites More sharing options...
OSUblake Posted April 4, 2022 Share Posted April 4, 2022 Sorry, but it's hard to troubleshoot a live site. It only takes a couple minutes to make a minimal demo. We are not asking to see your entire project, just the bare minimum need to recreate the issue. The simpler, the better. 1 Link to comment Share on other sites More sharing options...
Antonio78 Posted April 4, 2022 Author Share Posted April 4, 2022 Here is the pen. As you can see there is a #logo_header that starts already faded out because of the animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0}). See the Pen poppOdR by antoniostarace78 (@antoniostarace78) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted April 4, 2022 Solution Share Posted April 4, 2022 animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}), 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 4, 2022 Share Posted April 4, 2022 I would also suggest looking at this thread about opacity animations. 1 Link to comment Share on other sites More sharing options...
Antonio78 Posted April 4, 2022 Author Share Posted April 4, 2022 49 minutes ago, PointC said: animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}), Thank you PointC, this seems to work. Just one question, is this the way it is supposed to work? I mean, the tween should start only when the trigger passes the starting point, it should not be necessary to use immediateRender:false. If I add an onComplete event, it starts right after the page loads, so I assume that the tween starts anyway sooner than it should. Is there something I'm missing? Link to comment Share on other sites More sharing options...
PointC Posted April 4, 2022 Share Posted April 4, 2022 You have a situation where you're animating the same property of the same element with two ScrollTriggers. The values are cached up front when the ST is created so, in this case, we need to set immediateRender:false on the second one. Another option would be to use a fromTo() tween. This is discussed in more detail here: Happy tweening. 5 Link to comment Share on other sites More sharing options...
Antonio78 Posted April 5, 2022 Author Share Posted April 5, 2022 14 hours ago, PointC said: You have a situation where you're animating the same property of the same element with two ScrollTriggers. The values are cached up front when the ST is created so, in this case, we need to set immediateRender:false on the second one. Another option would be to use a fromTo() tween. This is discussed in more detail here: Happy tweening. I am familiar with this article but will definitely have to read it again. I have another question, just out of curiosity. At first I make the logo fade in with a css class, but then I make it fade out with a gsap action. I usually do it this way: what can be done with css I do with css, what is more handy to do with gsap I do with gsap. Is it wrong to use this kind of mixed technique on same elements? Link to comment Share on other sites More sharing options...
PointC Posted April 5, 2022 Share Posted April 5, 2022 If it's a property I plan to animate, I usually set it and animate it with GSAP to avoid any little problems. That's just my workflow though. YMMV. Happy tweening. 4 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