Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About kodralex

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

kodralex's Achievements

  1. Cheers for the detailed answer Craig. I'll have a play with both, I'll probably go down the sprite route 👍
  2. 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?
  3. 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(); };
  4. 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
  5. 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.
  6. @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.
  7. You replied just when I figured out what was happening. Thanks
  8. 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.
  9. 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
  10. 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.
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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.