Perdixo75
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Perdixo75
-
-
I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is :
Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ?
-
@Rodrigo Yes i've added a 0.6 value, looks wayy smoother !
I've pretty much done it. But i can't figure out how to add a scale effect on each
project-container__inner
during the scroll of each section..Here's what i have right now :
See the Pen bGgvygv by Perdixo757575 (@Perdixo757575) on CodePen
-
@Rodrigo Thanks for your answer. I agree the site isn't easy to navigate. What interest me is only that selected project section part with that "sticky stack" effect on scroll !
After looking at what you sent and trying again, i still didn't find the good solution. Here's where i am right now :
See the Pen bGgvedy by Perdixo757575 (@Perdixo757575) on CodePen
Still having trouble to understand how the effect on the website work
-
Hey,
I'm new to gsap and i'm currently looking at the ScrollTrigger plugin. I'm trying to create a scrolling effect that i've seen on multiple websites lately. You can see it in action in the "Selected projects" section of the following website : https://brunoarizio.com/ . I thought it'd be a nice exercice to try to reproduce it, but i'm totally stuck.
I'm not sure about the mechanics here .. i've tried for 2 hours to reproduce this effect (without the smooth scroll) but i can't make it work.. Any indications would be much much appreciated (with explanations if possible!).
From my beginner point of view, here's what happens (let's say we have 3 projects) :
- Each project have a different z-index so the first project is on top of the second and so on.
- The second project is moved top so we can only see it's infos (so if the height of one project is 750px, we move the first project -750px on the Y axis and the second one -1400px on the Y axis).
Now is the part i can't get my head around using the ScrollTrigger plugin :
- As soon as the project hits the bottom of the screen (minus the height of 3 project infos height), it translates top.
- As soon as its info div hits the top of the screen (pretty much so), the same goes for the second project, and so on.
I can't figure out how to translate this to code using the scrollTrigger plugin ... If someone could help me and explain to me what i'm missing that'd be awesome !
I've added a codepen but it's a thousand miles away from the final effect, i've modified it a hundred times ...
See the Pen xxgWOxd by Perdixo757575 (@Perdixo757575) on CodePen
Only animate elements visible in the viewport
in GSAP
Posted
@akapowl thanks a lot, i've got my answers !