kodralex

I've trying to display lots of falling icons. What I have so far is working fine, but it's only display one icon. I need to be able to display multiple css class selectors. gsap.set(Div,{attr:{class:'icon1'} I made have about 10 css classes in total e.g. .icon1 / .icon2 / .icon3 etc. In the example I've just added 2. I've tried many ways to add multiple classes but can't seem to get it working. Any ideas?

Thanks @Cassie that is what I was looking for. If anyone else reads this and are using AJAX load more plugin to load blog posts etc on a WordPress site you can use this function to solve the issue: window.almComplete = function(alm){ ScrollTrigger.refresh(); };

First off, apologies if this topic has already been covered (I did look back over previous forum posts and read through the documentation). But I couldn't see anything. Pretty simple problem Content on my page is being loaded via AJAX, and this seems to make the default ScrollSmoother get stuck. I figured it's happened because onload ScrollSmoother is figuring out the page height, and after this is done, the ajax is being called and thus changing the page height. Am I guessing I need to reinitialize ScrollSmoother after the AJAX call has been made? Here's an example page: https://optimus.devweb.site/news/ Thanks

I did think there was the ScorollTrigger option. I guess it does make sense that the default view is right in the center of the viewport. It's a really cool plugin this one. Thanks for taking time out to look for me, much appreciated.

@Cassie Is there a way to set the items to start moving from their original set positions on the page? E.g. looking at my example link again: https://optimus.devweb.site/. If you scroll down, you will see I have three coloured panels under the heading 'SECTORS' The default position of all these panels should be at the same level. If I add data-speed="1.2" to the middle panel (which I have done), when I scroll down, it starts at a lower position when the panels enter the viewport (See attached image). Is there a way so when all the panels enter the viewport, they are in their original positions, and then the middle panel would start moving up quicker on scroll. Is this possible? After further playing around with this. It looks like elements hit the original position in the middle of the viewport. I guess it's this that i'd like to change.

You replied just when I figured out what was happening. Thanks

I think I figured it out. It's because the 'default' data-speed would be 1 rather than 0. So i've adjusted and made higher and this seems to fix it.

Hi All, So I've started dabbling with the ScrollSmoother to create some straightforward parallax elements on the screen. But it doesn't seem to be working as I expect it to. I've not created a codepen but can supply a demo link here: https://optimus.devweb.site/. You will see I've added 'data-speed' attributes on the four small white icon boxes on the left-hand side. What seems to be happening is these boxes are on screen when the page loads - rather than being in a set position further down the page (see attached screenshot), and when I scroll, they seem to be going down the page rather than up (so they are always in view) which is a bit odd. I'm expecting this to work, on page load, they should be positioned like the attached image and then when I scroll down the page, the boxes move at slightly different speeds upwards with the rest of the page content. You can see my setup gsap code here: https://optimus.devweb.site/wp-content/themes/optimus/assets/js/gsap-settings.js Any pointers? Is there something I'm blindly doing wrong here? Thanks

Thanks for all the super replies. @mikel a big thank you ? I took the code you had in your first post and pretty much did what was need from that. I'll take a closer look at the codepen you added above. This is really really helpful.

Hi Cassie, Thanks for replying. Hmmm, that did cross my mind that it was related to FPS. I could easy created more frames, but I think I might start to see limitations with using an image sprite (just because of the size). It could end up with 500+ frames. Here is a sample .mp4 https://kodr.io/sample.mp4 showing precisely what I'm trying to get (please ignore it's rough). These shapes have been created in either blender or cinema 4d. Do you know if it's possible to make this kind of animation using GSAP? I could use mp4, but I can't place it on a transparent background. Any thoughts? Thanks

Hi, I'm trying to create a simple looped animation based on an image sprite sheet. I've made the image no problem in TexturePacker and found some previous code from doing some searches (I think Blake posted). So I've grabbed this code and updated it to GSAP3, and all is working fine. I want to slow the animation right down, so it's running much slower. I can adjust the duration to say 20 / 30, but the animation goes very jumpy. Any ideas on how to get around this? Could this be related to the large size sprite sheet? I've attached a working pen that you can check out. Thanks

Hi Craig, I can now see how you incorporated the array into the initial code I had. Thank you for taking time out to look, it's much appreciated. This will help greatly going forward. Thanks

Hi, I'm using ScrollTrigger with SplitText across many titles down a page. I've read the documentation and can see a section related to this in the "Most Common ScrollTrigger Mistakes" section. I see I need to create a toArray. I'm just a little unsure how to apply this code to the SplitText code I'm using. Can anyone point me in the right direction please? Thanks

Thanks Craig. I already figured after going back over the documentation and looking at some similar examples that I needed to timeline the bits together. Thanks for taking time out to look.

Just to update on this. I've re-worked the svg and got working using the drawSVG function. My next question is how do I stagger the animation? At the minute when you scroll down everything animates together, rather than one item after another. My guess this is something to do this the start value on the scroll trigger? Also might be best to view on codepen. For some reason the embedded pen above seems buggy. Thanks

Cheers for the reply. Yes I think I'll re-work the svg arrows into two pieces each and use drawSVG.

I have an svg circular shape which I'm trying to change the fill colour for different segments of the shape on scroll. Using pinned ScrollTrigger. The problem I'm facing is I've only done something like this using the DrawSVGPlugin which animates the stroke (see codepen). What I want to do is animate the fill on scroll (clockwise or top to bottom). Any ideas best way to do this? I've attached a rough gif (ignore it's looped) to give you an idea. I want to carry the colours rounds different colour for each arrow. Thanks

Excellent. Thank you so much @Jo Mourad & @Cassie ?

That works great. But the shape jumps at the start of the ScrollTrigger. Any idea why?

Hi, I'm doing a basic shape rotating using ScrollTrigger, and I've got the fundamentals working fine. Rather than the shape rotating from the centre point, is it possible to specify a particular corner from which the rotating will axis (example, bottom right corner)? Also, is there a way to determine how many rotations are to be made rather than using duration? Apologises if this is in the documentation and I've completely missed it. Thanks

Looking for a decent freelance GSAP developer that can help me with some animations on a Wordpress video site I’m working on. There will be various bits to do depending on what is possible within the constraints of the setup. 1. Want a main page building like this: https://dark.netflix.io/en/family-tree So the main elements will be images and text underneath and animated lines connecting. The functions will include’: • ‘tilt’ on mouse movement • Simple line animations - svg / css • Zoom In / Out / Pan - If this is going to be time consuming I can always use jQuery to do this. 2. Transition functions on click (not sure if these are possible on a Wordpress build). Can speak in further details about this directly. Anyone interested please DM me or send email to alex@kodr.io if you're interested in this job. Thanks!

Thanks for getting back to me Jack. What you said sounds great. I'll update the post with my own codepen if I get stuck on anything. I'll also add a final codepen once i'm done. It might be of use to someone else at some point.

Hi, I'm trying to re-create a function like used on this page: https://dark.netflix.io/en/family-tree (I know this site was built using gsap). I don't have a working pen right now. But I'll build out the main content of the page using html <canvas> then I just need to be able to zoom in / out / pan around and create slight tilt effect on mouse movement. My question is which of the various gsap plugins should I be using for which parts? Any help in the right direction will be great before I have a go at this. I did do a little searching beforehand and found this nice zoom / pan function (see codepen below). Maybe something like this for the tilt function (see codepen below) Not sure if it matters to much but I think these examples might be a little old now (not using gsap 3) Thanks in advance. https://codepen.io/osublake/pen/pedmMW https://codepen.io/alexkodr/pen/ZEeqBmZ

Cheers for pointing me in the right direct Zach. I should be able to figure it out from here. Thanks

Hi, I'm trying to get some images to have slight Y movement on scroll within each image containing div (overflow hidden). Similar to how the images move on this site: https://cuberto.com/projects/datalight/ I just can't figure out what i'm doing wrong here. I've had a look through the parallax demo's, but nothing stands out. Anyone point me in the right direction here? Thanks in advance.