Visual-Q

Hey Beka, Welcome to the forum. You could achieve these effects using a combination of 3d transforms as explained in the CSS Plugin docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin and using ScrollTrigger https://greensock.com/docs/v3/Plugins/ScrollTrigger If you're new to GSAP you may want to check out the getting started section to begin with: If you had code you need assistance with please make a codepen so we can see what's up.?

I believe removing the parenthesis will prevent the middle function from being invoked immediately. You also have some scoping issues, so something like this might point you in the right direction: https://codepen.io/Visual-Q/pen/RwVLmBJ

I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline: tl2 .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 }) .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })

You can do something like this, if you don't want css transitions you can replace them with gsap animations the principle is the same either way. https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

Hey Hardya, Check out the new install page https://greensock.com/docs/v3/Installation#CDN I believe tweenLite/max and the others are combined into a single core build which is just gsap now.

I'm not too familiar with particle animation but maybe these libraries would be useful: Particle js looks interesting. https://vincentgarreau.com/particles.js/ and I think threejs has particle systems as well: https://threejs.org

And have a look at this pen for a smooth scrolling solution together with scrollTrigger https://codepen.io/GreenSock/pen/gOgWELo

What does the console say?

@PointC has a very simple solution for this that clones and loops an element. The example shows text scrolling horizontally but you should be able to set it up to scroll vertically with an image. https://codepen.io/PointC/pen/ExgExxL

Hey Ak, unless I'm missing something I think you are indeed comparing Apples to Green Socks. The link example you give actually scrubs through a sequence of images like a video, not really parallax. These threads might help point you in the right direction, search the forum there might be some others.

Hi Maelle, Welcome to the forum, building out custom examples for requests is a bit beyond the scope of the forum but of course anyone is welcome to assist with that if they want to. It sounds like you've already made a start, so if you can create a codepen of where you're at it would help a lot. I'm not a Vue guy so someone else would have to advise about that. As far as the parallax goes the best place to start is probably just to create a timeline animating the elements and adjust the speed of the elements till the timing of everything looks good. Then you'll want to explore controlling it with scrollTrigger likely using a combination of pinning and scrubbing. Hope that helps point you in the right direction.

I think I'd have to agree with this, I know myself I have to evaluate a lot of plugins in the wordpress work I do and the fist thing I look for is a pricing page to find out what's what. In virtually every such page I've seen there if there is a free option/version it is always highlighted. I might suggest going to four columns and adding a panel specifying that the core engine is free. As far as Club Greensock goes you could preserve brand equity just fine and make it easier to understand if you just changed the menu link to Club GreenSock Pricing.

I'm sure someone can come along to help you set this up better as I haven't had much time to spend with scrollTrigger yet but I think I can shed some light on what's happening, your start and end positions for the divsOne and divsTwo are in the same place and not accounting for the elements being in different positions, you can see this if you show markers on the divsTwo in your pen the starts and ends have already come and gone before the elements are even on the screen. In this pen I accounted for the divsTwo position after the first section's pin spacer. I don't say this is a good solution for this, just illustrating what's happening. var parentOffset = chOne.scrollWidth - document.documentElement.clientWidth + window.innerHeight; start: () => parentOffset + start + (elWidth * 0.5), end: () => parentOffset + start + (window.innerWidth), https://codepen.io/Visual-Q/pen/poeLdRd

Check out this post @PointC has a very clever implementation of a similar infinite scroll using cloned node.

Love it. Great Job!