hannah_hey
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by hannah_hey
-
-
Hello again,
im working on a small gsap scroll animation but im stuck and i've tried nearly everything but nothing works for me but i can't imagine that this is not possible because it seams so simple.
What I'm trying to do is (I've simplyfied the code in my minimal demo i've also written what and when i want to do what in the code)...... I want a picture coming in from the left then disable the scrolling so i cant do any scrolling anymore unless i click the picture. So the clicking enables the scrolling then i can continue to scroll and the second picture comes in from the side.
I've tried so many things and nothing works so it would be very nice if anybody could help me out on this.
See the Pen KKGEWGb by hannaaaahp (@hannaaaahp) on CodePen
-
Hmm... Im still pretty lost on how to include it in my code cause it seams like this is fixed and not something i can enable an disable... Maybe you can show it in a codepen how you thought to include your code...
-
Hey guys,
Im still a little unsure on how to embed pictures in my codepen so if you cant help without the pictures it would be nice if you can tell me how to put the pictures in there.
Our problem
We have this simple animation (the basic framework is already done) but we want the ability to scroll to stop when the pictures like: "P1,P2,P3" are starting to glow. So the idea is that when the pictures (P1,...) are done with their scroll animation that the user cant scroll anymore and has to click the image and after that he can start scrolling again. Also the picture shouldn't be able to be clicked when its not done yet with its animation.
I hope you understand the problem and can give me a hand on that.
thanksSee the Pen WNazdRd by hannaaaahp (@hannaaaahp) on CodePen
-
well thank you already but the video didn't really help...
i learned some new things in the video but the toggleActions won't work as i am having a pinned website so the scroll trigger never goes out the frame (at least i guess thats the reason).
I'd like to provide a Codepen but i dont know how to embed pictures in the Codepen...
See the Pen LYgLzBG by hannaaaahp (@hannaaaahp) on CodePen
Anyways im adding the link here if thats also enough
I'm also a little lost in finding a way to provide the demo just like the one in the beginning😅
I hope you can still help me if not it would be nice if you could help me out a little🙃 -
I added the codepen now i hope anybody can help me solve this problem...(:
-
Hey everybody,
i need quick help with an issue on my scroll trigger animation.i have a simple scroll triggered animation but when i scroll to a certain point and refresh the page the animation stays where it was the moment i refreshed. But i want it to jump back to the beginning when refreshing. Is there a simple solution?
PS: I now added the codepen im not sure what exactly i should have added but thats everything i have so i hope you can help me...
See the Pen XWxRWgM by hannaaaahp (@hannaaaahp) on CodePen
-
27 minutes ago, Rodrigo said:
Hi @hannah_hey and welcome to the GreenSock forums!
There are a few issues in your example, starting with the version of GSAP and ScrollTrigger you're using (3.8, now we're currently on 3.11.5), some names in your classes and code and finally your CSS as well.
In this cases is far better to just create the animation and add ScrollTrigger to the code after your animation works the way you expect. Keep in mind that ScrollTrigger just updates the progress of an animation based on the scroll position, nothing more. You can learn more about it in this video:
I created a fork of your codepen with some changes in it:
Hopefully that's enough to get you started.
Happy Tweening!
Thank you Rodrigo!
this is exactly what I imagined. In the time i also found a solution for the issue with the wrong positions with different screensizes. I now used the units vh vw for all my sizes and positions, wich worked pretty great.
I also watched the video already but I was having some troubles with understanding everything as I don't understand perfect English (but it still helped a lot getting to understand how gsap animations work). That's maybe also the reason why you didn't get the naming of my classes (they are all german).
So for me there are only two questions left. How did I embed the wrong gsap and scrolltrigger version? is it that in your code you wrote gsap.timeline instead of like me gsap.to?
And do I need the "pin: true,"? Because i don't see a reason for it as it worked perfectly fine without...
thanks again for the fast reply! -
Hey,
Im new here and i have two (probably very simple) questions. Would be nice if someone could help with a not to complicated solution.
What we are trying to do:We want a scrolling framework where the background doesn't move and as a foreground theres a curtain opening with scroll trigger. In between the fore- and background there are three people coming in from the side, one by one also with scroll trigger.
Our first problem:
We have a repository on Github and work on three different screen sizes. On my Laptop everything looks fine and works. But if the others open it the position of the curtains change. The animation is still the same but starts on a different position.
Our second problem:
When I on my Laptop add one of the persons and/or change the size/position/etc. the curtains move to the left or right. Again the animation still works but the position is different. We tried to define the position with px and percent but it didn't work.
PS: I hope it worked and you can see the files if not please tell me how i can add them correctly. Thank you!
See the Pen XWxRWgM by hannaaaahp (@hannaaaahp) on CodePen
lock scrolltrigger in timeline and enable via onclick multiple times
in GSAP
Posted
That worked pretty well ill work on the UX but at least this works now. Thank you so much!