Start Timeline when in view on screen

[codekai98]

Hi everyone!

 

I just started using GS and I must say, it is such a powerful tool ?

 

I am using this codepen to practice. Basically what I am trying to achieve is to apply Tweens to <h1> and <p> on each individual slide to create a Timeline. The goal is to trigger that Timeline to start once the user scrolls to the corresponding slide (ex. if I scroll to Slide 2, the animations on <h1> and <p> start). I have tried to do this myself, but all of the animations start on page load. I also want to try to avoid ScrollMagic since I'm a bit inexperienced with it and am still pretty new to GSAP -- want to get the hang of the latter first. However, if the solution is pretty simple with ScrollMagic, I am open to the suggestion!

 

Any help is much appreciated ?

See the Pen kDvmC by bassta (@bassta) on CodePen

[Shaun Gorneau]

Hi @codekai98 and welcome to GSAP!

 

Here is a pen I threw together to help someone with a similar question a few months back ... it may be helpful to you too. It tackles a few things you mention in your post

1. Navigating between slides (scroll and keyboard arrows)
2. Tweening child elements when reaching a slide
3. Avoiding ScrollMagic

 

See the Pen qYEKLy by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

[codekai98]

Hi @Shaun Gorneau,

 

I looked over at the pen you linked, and it sort of makes sense... I'm just confused as to how it can be applied to the pen I linked in my previous post. 

[PointC]

Hi @codekai98 

 

Welcome to the forum. 

 

The subject of this thread is quite similar to what you're asking and uses the demo you referenced too. I think it can help you.

 

Happy tweening.

 

[codekai98]

@PointC Oh that is wonderful! Thank you so much ? and thank you @Shaun Gorneau as well for your help!

[Shaun Gorneau]

2 hours ago, codekai98 said:

Hi @Shaun Gorneau,

 

I looked over at the pen you linked, and it sort of makes sense... I'm just confused as to how it can be applied to the pen I linked in my previous post. 

 

I wasn't entirely sure what you were asking, but I did outline the reasons why I thought the pen would be helpful with regard to addressing the following ...

1. Navigating between slides (scroll and keyboard arrows)
2. Tweening child elements when reaching a slide
3. Avoiding ScrollMagic

Of course, though, if my understanding was off ... then the pen would also miss the mark.

[codekai98]

@Shaun Gorneau My fault for not elaborating enough, sorry!

On another note, would there be a simpler solution? Perhaps with ScrollMagic? 

[Shaun Gorneau]

@codekai98 Now worries ... I think a big part of the problem here is all pens are accomplishing many things (slide navigation, slide transitions, slide element tweens, etc.)

 

In my example, all you really have to focus on is a small part with the " function moveToSlide( index )", notably

 

// Slide moving to
TweenMax.to('.wrapper', 1 , { y: -$('.wrapper').height()*(index-1), rotation: 0, ease: Power2.easeOut } );
TweenMax.to( intoSection.find('.background-image-wrapper'), 1 , { y: 0, rotation: 0 } );
TweenMax.to( intoSection.find('h2') , .5, { y: 0, autoAlpha: 1 } );
TweenMax.staggerTo( intoSection.find('.some-content') , .75, { y: 0, autoAlpha: 1, delay: .5 }, .125, function(){ isScrolling = false; } );

 

 

That is what is handling the tweening of elements on the slide being moved into (rather than being tween on page load).