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:

Hah I literally just worked it out as you replied to this. Thanks so much though . Champion

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.

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

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.

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.

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

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.