DexteRs Code

for the exact same codepen above what if i want any particular words to be red and with the same animation continuity, is there any way to do that?

Oh nice, didn't knew about that, thankyou for the help!!

I'm working on a project where I need the scrolltrigger logic for the inner div and not on outer/ main div (orange section). The inner div contains 3 sections, where the 2nd section should change it's background color to white when its top hits center of the screen, but currently it's creating an extra div at the bottom of outer div (orange section) and when the outer div is scrolled then the 2nd section changes the background color to white. Is there any way to apply scrolltrigger to the inner div only ? PS :To see the problem, plz go to full screen on codepen. Thanks in advance!

I agree, at the first I thought the same, but when I tested this on mobileview and clicked on the text input field, the android soft keyboard appears and resizes the whole viewport's innerHeight and triggers the animation. That's the only reason. But thanks for replying !!

I'm working with the scrolltrigger and smooth scrollbar js. In my demo below, as I resize my browser's height, all the sections will remain the same height as it was initially set (until you refresh), but the srolltrigger element changes its positions as if I've scrolled. In this demo the second and third h1 element changes the position as you resize the window height, but I don't want them to... Is there any way to stop this? PS :To see the problem, I think you need to go to the codepen full screen by clicking on edit on codepen. Thanks in advance!

hey it worked, I didn't used scrollTo() method cause it takes value as position... I used scrollIntoView() which takes html element as target. thanks again..

Ohh no, I didn't knew that ?. Thanks for replying this quick.?

I'm creating a project where i need smooth scrolling as well as scroll-to function. In my codepen I've used smooth-scrollbar library coexisting with scrolltrigger's scrollerproxy() library... which works fine. But due to the scrolljaking the scrolltoplugin is not working properly. I've tried scrolltoplugin without smooth scrolling it works but I need both to work together. Is there any way to make them work together? Thanks in advance!

GSAP saves the day

@mikel Thanks for responding that quick, this is helpful !!

I'am trying to create an image gallery, where images flow on z-axis. I am able make image div to flow on z-axis using scrolltrigger. But what I wanted, was to control the opacity of div to go from 1 to 0 when the image div (class name as "square") is close to camera/ viewport (for this code it is z = 700) so it will have a fade effect. In short whenever any one of these five image div goes z = 700 the opacity should be 0 . In style.css I've used perspective attribute for 3d perspective which will allow me to have images to flow on z-axis. I got this idea from awwwards.com original concept for reference: http://ab-architects.nextpage.agency/public/ I am trying to create gallery like this but cant figure out how to control the opacity in between the timeline animation... any suggestions on how I could achieve this effect using timeline and keep the scrolltrigger. Thanks in advance

I tried to use this method on my project where I've a pinned element, using GSAP. The thing is it worked on every animations , except the element I've pinned. It plays the animation but also scrolls down without getting pinned and creates the extra black spacing until the animation is over. Any Suggestions !!