Use with Scrollmagic and JS

[G-R-B]

Hi there,

I am new to GreenSock  and very much liking the look of the functionality and looking forward to making stuff with it.

I have only started to learn Javascript as its about time I learnt and to use GSAP I cannot avoid. I also want to advance in my web building skills. Please forgive me if this is not the place to ask but I have been trying to work it out for days and you pros would be able to work it out in probably 5 seconds.

The codepen I created can be found in this post. I am trying to work out how I can use the same JS code for 'Titletwo' that will pin to the scroll and animate GSAP on .content.three H1 as it does with content.two H1 without having to duplicate the same code over and over for each H1 title. 
 

I was trying to replicate the large headers as a challenge on GSAP/Scrollmagic (this site doesnt use it)  on this site: https://bit.ly/2LTqQad if you notice the very large 'Solutions', 'About Us' etc that run behind the main content. So far I managed to use GSAP to dynamically adjust the opacity of the headers perfectly.

 

I was just doing this as an exercise to learn. I would be most grateful if someone could help me on how to write the javascript to avoid having to duplicate the same code per each header, if its possible

Many thanks!! I am putting some time aside to start to learn Javascript this month and will continue. Very excited to learn some new things and do some cool things with SVGs and GSAP.

 

[PointC]

If you have duplicate scenes for elements using ScrollMagic, you'd want to use an each() loop and find() the elements in each group that you want to animate. Right now you have an each() loop on your .content.two class, but you only have one of those. You'd probably want to use each() on your .content class and find() the h1, .fader-wrap etc. in each of those divs that you want to animate and create a timeline and scene for each one.

 

Here's a demo from another thread, but it shows the basic mechanics of how to make it work.

 

See the Pen zaBYoW by PointC (@PointC) on CodePen

 Hopefully that helps. Happy tweening.

 

[G-R-B]

3 minutes ago, PointC said:

If you have duplicate scenes for elements using ScrollMagic, you'd want to use an each() loop and find() the elements in each group that you want to animate. Right now you have an each() loop on your .content.two class, but you only have one of those. You'd probably want to use each() on your .content class and find() the h1, .fader-wrap etc. in each of those divs that you want to animate and create a timeline and scene for each one.

 

Here's a demo from another thread, but it shows the basic mechanics of how to make it work.

 

See the Pen zaBYoW by PointC (@PointC) on CodePen

 Hopefully that helps. Happy tweening.

 

 

Many thanks for the reply, very much appreciated.

I had 'content.two' on the 'each' as when I removed it, the scrolling would go very fast down the page. I couldnt understand why.

Its 3am now here in Australia and going to bed so I will check out your codepen link tomorrow when I wake up and try and work it out and report back. Thanks a lot and good day to you

[Carl]

Here is another demo that @PointC created that shows the power of generating animations for ScrollMagic with loops

 

See the Pen evqNEP by PointC (@PointC) on CodePen

 

 

 

 

 

 

[PointC]

Hey, has someone been browsing through my CodePens?  

 

I forgot about that one. 

[Carl]

I just did the same thing I always do when a ScrollMagic thing comes up, goole: pointc scrollmagic loop

[G-R-B]

Hi guys, thanks for the replies.

After spending the last 5 hours trying to work it out; I haven't been able to unfortunately.  It has done my head in.

I removed the fader and the fade-out pins to try and work it out without that to less complicate itand get one loop working properly first.

The issue I have is where I need to specify the 'triggerElement' and 'setPin' as those examples provided and other ones I found from Google on Codeepen are always using 'this' for the trigger and not using the setPin. Seems that both these functions wont let me use something from a variable and that I can only use 'this' or the specific '.class'. And if I do that with the pin it goes to the right of the screen and bananas and fast down the page and the .content.three doesnt work either. triggerElement also will only use the default.

Perhaps there is some Javascript that can be used to accept it that I don't know since I know very minimal at the moment....or perhaps I have totally misunderstaood what PointC said and have done it totally incorrectly. Now need to go and relax as its fried my brain

I used the same Codepen. I am guessing I have totally missed the mark on how I was supposed to write it in JS.

 

[PointC]

I'm not 100% sure I understand what you want to happen here. Are you trying to pin the h1 in each content section while that section content scrolls? Like this:

 

See the Pen BVLgmX by PointC (@PointC) on CodePen

 

Does that help?

[G-R-B]

19 minutes ago, PointC said:

I'm not 100% sure I understand what you want to happen here. Are you trying to pin the h1 in each content section while that section content scrolls? Like this:

 

See the Pen BVLgmX by PointC (@PointC) on CodePen

 

Does that help?

 

 

ROFL....yes that's what I wanted the fullpin to do so I will replicate with the two other pins that do the midfade and fadeout.

All I needed was the [0] on the .find function? You did it in 5 seconds no doubt hah. So this finds the first H1 child right? But if its in .content and they all each loop through each ID/class with .content, then why does it not function without selecting the child in array? I guess its not a JS learning forum but would be nice to know. Just started a course on Udemy today.

Thanks so much.

[PointC]

Oh, all the H1 tags are still separate in the each() loop. The [0] is just to get to the actual H1 in the jQuery object. That was necessary for ScrollMagic to pin the actual H1 instead of trying to pin the jQuery object. If you were using a regular loop with a selector like document.querySelector(), that [0] would not be necessary as you'd have an actual DOM element. 

 

If you want to see the object that jQuery returns just use it as a selector and console.log() the variable to take a look under the hood.

 

The only other thing I changed was adding the each() loop index to the indicator names so you can clearly see which one is which.

 

Happy tweening.

 

[G-R-B]

On 6/8/2018 at 3:39 AM, PointC said:

Oh, all the H1 tags are still separate in the each() loop. The [0] is just to get to the actual H1 in the jQuery object. That was necessary for ScrollMagic to pin the actual H1 instead of trying to pin the jQuery object. If you were using a regular loop with a selector like document.querySelector(), that [0] would not be necessary as you'd have an actual DOM element. 

 

If you want to see the object that jQuery returns just use it as a selector and console.log() the variable to take a look under the hood.

 

The only other thing I changed was adding the each() loop index to the indicator names so you can clearly see which one is which.

 

Happy tweening.

 

Thanks a lot for the explaination... will go back to look at it  

 

[G-R-B]

On 6/8/2018 at 3:39 AM, PointC said:

Oh, all the H1 tags are still separate in the each() loop. The [0] is just to get to the actual H1 in the jQuery object. That was necessary for ScrollMagic to pin the actual H1 instead of trying to pin the jQuery object. If you were using a regular loop with a selector like document.querySelector(), that [0] would not be necessary as you'd have an actual DOM element. 

 

If you want to see the object that jQuery returns just use it as a selector and console.log() the variable to take a look under the hood.

 

The only other thing I changed was adding the each() loop index to the indicator names so you can clearly see which one is which.

 

Happy tweening.

 

EDIT: I worked it out. I copied and pasted a tween which wasn't using the VAR for the .find

Hi again, I tried to add the 2nd trigger to use TLmax to create the fade for the H1 element but seems when I add a 2nd Scene it seems to effect the other H1 children below it (meaning the Tween effects the timeline in the H1 children already before scrolling to that point of the page as the Trigger seems to trigger them all), and when you scroll back up the page it wont go back until it hits the trigger on the way back

 

Here is where I got to at the moment:

 

 

 

I guess my Javascript it not correct again

Thanks.

 

[PointC]

In your 2nd each() loop you have this on line 67

 

TweenMax.fromTo('.fixedtitle', 0.3,  {autoAlpha: 0.6}, {autoAlpha: 0.1, ease: Power4.easeNone})

 

That is targeting all h1 tags as they all have that .fixedtitle class so they will all animate at each trigger point. You need to target only the h1 in that iteration of the loop just like you did in the 1st each() loop. You can either assign it to a variable or drop it straight into the tween like this.

 

TweenMax.fromTo($(this).find("h1"), 0.3,  {autoAlpha: 0.6}, {autoAlpha: 0.1, ease: Power4.easeNone})

 

Happy tweening.

[G-R-B]

2 minutes ago, PointC said:

In your 2nd each() loop you have this on line 67

 

TweenMax.fromTo('.fixedtitle', 0.3,  {autoAlpha: 0.6}, {autoAlpha: 0.1, ease: Power4.easeNone})

 

That is targeting all h1 tags as they all have that .fixedtitle class so they will all animate at each trigger point. You need to target only the h1 in that iteration of the loop just like you did in the 1st each() loop. You can either assign it to a variable or drop it straight into the tween like this.

 

TweenMax.fromTo($(this).find("h1"), 0.3,  {autoAlpha: 0.6}, {autoAlpha: 0.1, ease: Power4.easeNone})

 

Happy tweening.

Hah I literally just worked it out as you replied to this.

Thanks so much though . Champion 

[G-R-B]

Hi guys, an update to this is I incorporated fluid typography which resizes my H1 when the window size changes, however the 'offset' params do not update when my font-size changes size. I referred to 'updateScene' but seems that didn't work for me, provided I used it correctly.

 

Is there something I am not doing correctly or I need to change in Javascript so that the 'offset' changes when the window size changes? I've spent around 10 hours on trying to work it out so apologies in advance for asking and many thanks if anyone is kind enough to help. Thanks

I haven't been able to get to move onto getting to doing the full GSAP animations yet which is my next task and will be excited to.

The updated Codepen: