Can somebody help me fix this animation using GSAP ScrollTrigger?
https://codepen.io/sougataghar47/pen/RNbZVyQ here is the pen
22 Replies
What is your goal ? 'fix' it doesnt tell us much. how would you like it to behave?
the pinnedContainer shouldnt overlap and stay in its position and the images should go upwards
when scrolling
BTS22_admin
BTS
BTS Bioengineering | Motion Capture Systems for Sport & Healthcare
Capturing human body movement since 1986. We connect the world of healthcare and sport with cutting-edge motion capture technologies.
go to this section below and you will see what I mean
I shut down the computer for the night bit either someone else will be along to help or I will take a look at it tmrw.
But to speed up the process what is the pinnedContainer in reference to? I see no class or ID or Javascript variable with that name.
You also seem to have several scroll triggers with various starts and ends.
Additionally just for future reference you don't have to bring in the script tags for gsap on codepen , you can add the library feom the settings on your project!
the pinnedContainer is the container that holds all images
and it needs to stay pinned until we the see the end image
The element with the class of
.image-container ?
You could probably accomplish it with position sticky without gsap, is gsap a requirement/ necessity?
You have so so many gsap markers, why ?On mobile so can't do a whole lot but here's a simplified start
https://codepen.io/Miss-Fox/pen/JoPyvKx
yes
i wanna learn gsap , so i would prefer gsap
and your solution only works if the scroll is in the container '
That doesn't answer my question 😆
Like I said , it's a start as I'm on mobile. Will leave it here for the night
And nope it scrolls even of I'm outside the container when going down
thank you for your effort 🙂
I woonder why you made another container
doesnt work for me 😦
i think it works on mobile because of screen size
To be able to use sticky positioning and overflow hidden as well as overflow scroll
I would be happy if you can do with gsap 😦
anybody else can help me ?
As i said, i was able to take a look at it today and try to remember how to use gsap. i think this is what you wanted. i would recommend building it again yourself from scratch (at least the JS part) since you said you wanted to learn gsap.
https://codepen.io/Miss-Fox/pen/JoPyvKx?editors=1010
thank you so much but doesnt the white space around looks bad ?
That's how your example was, as well as you said you wanted it pinned, you didnt want to use position sticky, you wanted to learn GSAP. I dont have any more time to work tweaking this, was hoping this can get you started and give you a base to learn gsap as that was your goal.
You're welcome to make another post amd see if someone else will build it brick by brick but more beneficial would be to dive into the GSAP docs to configure it exactly how you want it.
ScrollTrigger | GSAP | Docs & Learning
ScrollTrigger enables anyone to create jaw-dropping scroll-based animations with minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.
I did create my own pen
I will be deleting it in the next couple days so be sure to fork it if you need anything off it
i used timeline and
and removed the scroller as I didnt want extra markup