Jump to content
Search Community

timeline start

eZoulou test
Moderator Tag

Recommended Posts

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

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

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

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

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

 

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)

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...