Sveninyo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Sveninyo
-
-
@Rodrigo I added a 0 between curly bracket and bracket }, 0); to make it start at the same time. Now its just like I wanted it! Thank you!
-
Hello @akapowl ,
@Carl just told me to make a pen. So here it is:See the Pen ExONmrJ by Sveninyo (@Sveninyo) on CodePen
He also shared this with me:See the Pen vYLvZKY??editors=0010 by snorkltv (@snorkltv) on CodePen
This is almost what I want, but just "scrubbable".
Like I said, the my code works fine, I just think it isn't neat.
I will check your links now. Thank you anyway! The support here is world class! -
Hello,
I have a general question. How can I avoid redundant code (following DRY principles) using GSAP (especially ScrollTrigger)?
For example, the code below works just fine but It repeats 3 times and I don't want that. Isn't it possible to "store" the scrollTrigger information in a variable (since it's always the same) and apply it to the animations? I tried it with ScrollTrigger.create() but that doesn't work.
I'm pretty sure this topic is covered already, I just can't find it. Please just point me to it. I can solve it myself!
Thank you in advance!
gsap.from("#cloud-front", {
scrollTrigger: {
trigger: "#rocket-animation",
scrub: true,
start: "top 95%",
end: "top 5%",
markers: true
},
y: 160,
});
gsap.from("#cloud-back", {
scrollTrigger: {
trigger: "#rocket-animation",
scrub: true,
start: "top 95%",
end: "top 5%",
markers: true
},
y: 80,
});
gsap.from("#rocket", {
scrollTrigger: {
trigger: "#rocket-animation",
scrub: true,
start: "top 95%",
end: "top 5%",
markers: true
},
y: 240,
}); -
Thank you, I will study your pen. I just bought Carls Courses yesterday.
Quotejust focus on the animation at first and only when you're happy with the animation add ScrollTrigger
I'll keep that in mind for sure.
QuoteYou rarely need more than one ScrollTrigger to get the desired result.
I just thought so. Just didn't know any better.
-
1
-
1
-
-
Hello,
I have made a section reveal effect based on the demo by Zach Saucier (See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen
). So far everything works fine, however I want to change the background color of each section from black to white as soon as they are revealed. Currently only the first section changes the color. What am I doing wrong? Thank you for your help. -
Sure. The animation has to be INSIDE the function ... 😅
Also the const is not needed (anymore).Thank you heaps!
-
Hello
I'm trying to combine an array of each element (a class in this case) with a ScrollTrigger Timeline animation (simple fade-in, fade-out). But it doesn't work. The console doesn't show any JS errors. I attached a Pen with my code.
Thanks for the help.
-
Cool! Thank you. I learn a lot here 😀
-
Hi,
I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes.
Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen.
Thank for the help!
-
Hello,
I made a simple page transition (block reveal) animation with GSAP and barba.js.
The animation works fine, but I have a flickering effect because the new page loads before the "leave" animation is done.
I don't know how to fix this ... maybe a JS wizard could help?
I attached the file.
Thanks,
-
Yes! I think that's it! I will just start learning how to use ScrollTrigger now! ☺️
Thank you!
-
Hello,
I'm new here and I want to learn about GSAP.
With my Wappalyzer browser add-on I've found out that many websites that use GSAP have a "delay/smoothing effect" when scrolled down.
It's hard to explain, but it feels like the scroll behavior is different than with "normal" websites. To better understand what I mean,
here's are some links to websites that have this kind of effect.
https://pureemaison.com/en/ or
If this question is already answered, please post the link.
Thank you very much!
Sven
Start and End markers are offsetted from the trigger, scrolltrigger
in GSAP
Posted
Hello @iamruletik
welcome to the GreenSock forum
To get quick and helpful answers here, I advise you to first create an account on CodePen. Then post your CodePen and describe what you want to do.
Secondly, I would advise you to learn the basics of frontend development (HTML, CSS, JS). If you use tools like Webflow you will get fast results but you will never understand 100% what is going on under the hood.