eZoulou Posted October 1, 2021 Share Posted October 1, 2021 Hi Folks, This is my first GSAP project and I'm delighted. Here is an issue I've got since a couple of days so I figured I'd ask for help : I did expect the #intro to be hidden only when the red_timeline starts (so when #screen_red enters viewport). But in practical, the red_timeline starts as soon as page loads. Any advice? Cheers, Florent See the Pen QWgoeyg by eZoulou (@eZoulou) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 Welcome to the forums @eZoulou Your timeline really isn't starting immediately. You just a have a set call at the start of it, which will set it immediately. You could add a little delay to it like... .set('#intro', { display : 'none' }, 0.0001); Or use the onToggle callback to change the intro however you'd like. Link to comment Share on other sites More sharing options...
eZoulou Posted October 1, 2021 Author Share Posted October 1, 2021 Thanks for the answer. The little delay hack does not quite work but the onToggle is promissing. I'll get back if needed. Cheeers, F 1 Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 It will work if you add more to the timeline, which I assuming you were going to do? See the Pen qBjwBMM by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
eZoulou Posted October 1, 2021 Author Share Posted October 1, 2021 OK I got it now. It's getting better but I still have a rewind (scrub) issue : the h2.xl titles won't come back when I scroll back up. Here is a more complete example : See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen Thanks for the attention, F Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 It looks like you have a bunch of nested timelines with ScrollTriggers. Check out the most common ScrollTrigger mistakes... So you probably don't need a master timeline. Just make every timeline with a ScrollTrigger independent. 1 Link to comment Share on other sites More sharing options...
eZoulou Posted October 1, 2021 Author Share Posted October 1, 2021 I already checked the common mistakes But I'll check again. Anyway I removed the main timeline (I did read somewhere it was better this way) but still the titles won't re-appear... See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 1, 2021 Share Posted October 1, 2021 Can you simply your demo some? There's a lot of stuff going on, and I'm not sure what stuff you're referring to. Thanks. Link to comment Share on other sites More sharing options...
eZoulou Posted October 1, 2021 Author Share Posted October 1, 2021 Fair enough Here it is . It's about the #intro h2.xl apparition effect not reverting well while scrubbing (scrolling back up). See the Pen XWgQJKB by eZoulou (@eZoulou) on CodePen Thanks a lot for the attention. By the way, as well as I would like to understand the reason of the 'bug', I have found a workaround by using a callback onLeaveBack: () => { // Workarround scrub not showing back titles. gsap.set('h2.screen'+ (i+2), { display : 'block'}, 0.0001); } Link to comment Share on other sites More sharing options...
Cassie Posted October 3, 2021 Share Posted October 3, 2021 Hey Ezoulou, You have inline display properties on some things and a lot of set calls trying to override these styles. Neither of these seem necessary - I recommend against inline styles too as they're very high specificity. Best to just keep all the styling in your stylesheet. The timelines are also a little confusing, I assumed one timeline was controlling the text animations and one was controlling the images but you have the text fades controlled in both timelines, so there's some conflicts going on. (h2.screen2) You're also using empty tweens for spacing. I suggest looking into the position parameter instead. I've broken your demo down into the individual parts so there's one timeline for text and one for the intro. I've got rid of a lot of conflicting set calls and simplified it a bit. Rather than toggling display on the text you can position the text on top of each other with position absolute which saves repeating 'Nous sommes' multiple times. Hope this helps. See the Pen oNwRgER?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
eZoulou Posted October 4, 2021 Author Share Posted October 4, 2021 Hi Cassie, Thank u for taking the time to answer. Really much appreciated I'm looking into that now. 1 Link to comment Share on other sites More sharing options...
eZoulou Posted October 4, 2021 Author Share Posted October 4, 2021 Here it goes, a simplier demo inspired by your proposal : See the Pen yLXWKra by eZoulou (@eZoulou) on CodePen Any idea on how to : 1/ have #screen2 sccrollTrigger (and further screens) starts only after the intro text effect has ended? 2/ have titles (h3.screen2, h3.screen3 etc) start showing before the previous one is fully hidden? (I tried pinSpacing: false to shorten the delay between appearance/disapearance). Regards, F 1 Link to comment Share on other sites More sharing options...
eZoulou Posted October 4, 2021 Author Share Posted October 4, 2021 I've found a solution for #1 that works ok. I added a margin-top in css + set start to 'top 50%'. See the Pen Pojvdpo by eZoulou (@eZoulou) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 4, 2021 Share Posted October 4, 2021 3 hours ago, eZoulou said: 2/ have titles (h3.screen2, h3.screen3 etc) start showing before the previous one is fully hidden? (I tried pinSpacing: false to shorten the delay between appearance/disapearance). If I understand correctly, in order to 'overlap' animations you either need to make sure the start and end triggers of each section are right next to each other or potentially use one timeline and the position parameter to overlap items. See the Pen vYZwbeX?editors=0011 by GreenSock (@GreenSock) on CodePen (It's a lot easier to work these things out with a minimal demo) 3 Link to comment Share on other sites More sharing options...
eZoulou Posted October 4, 2021 Author Share Posted October 4, 2021 Thanks, I'll use 2 different timelines synchonized : one for the images, one for the texts. Thanks for the tips. 1 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