Jump to content

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

ZachSaucier last won the day on September 24

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. Hey sashaikevich. This thread covers how to do this sort of thing. You can't use a regular animation because it doesn't wrap properly as you mention. You should use modifiers as the thread below suggests:
  2. Hey Ibad and welcome to the GreenSock forums. It's really hard for to help with only the code that you've provided. Can you please create a minimal demo of the issue? Also note that we recommend using actual elements or CSS variables instead of using the CSSRulePlugin in most cases. We also recommend that you use GSAP 3 syntax which you can learn about here:
  3. Hey SumitJadhav. In general it's good to use a smooth scrolling library for this sort of thing. GSAP's official scroll plugin, ScrollTrigger, works great with them! Check out the .scrollerProxy() docs for info and demos. Also we highly recommend the GSAP 3 syntax. You can learn how to migrate here:
  4. Hey Pradeep. Can you please make a minimal demo using something like CodePen? It will help us help you more quickly and easily:
  5. Using an offset transformOrigin is the way to do this sort of thing. We highly recommend using the rotation property instead of passing in matrixes. You actually don't need pinning for this effect at all, the page you link just uses transforms.
  6. Huh, it works for me. But CodePen does some funny things sometimes.
  7. @GeS You need to recreate any animations whose targets have been switched out and refresh ScrollTrigger when the page is done loading the new content. Maybe this article can help.
  8. Hey dnknapp and welcome to the GreenSock forums. Thanks for supporting GreenSock by being a Club GreenSock member! You're making one of the most common ScrollTrigger mistakes: .to() tweens with ScrollTriggers get evaluated immediately so you need to set immediateRender: false if you don't want that to happen. In this case you should also set overwrite: 'auto' to make sure the old tween is killed when the ScrollTrigger is reached. But this helped us find a bug in the current version that made it glitch even if you did that. We fixed the bug and you can see the working version below (you may need to clear your cache): https://codepen.io/GreenSock/pen/5ee69c59eea050ee5b3efcf75313bf5e Visual-Q's method also works
  9. Hey Nine. GSAP doesn't have a plugin specifically for preloading content - that's a bit out of scope for what GSAP is The core concept is: Load only the code necessary for the preloader. Start the preloader animation. Make sure the overflow is hidden. Either directly after the code for the preloader has been added or in parallel (depending on what your preference is) start loading the actual page's content. Set it up behind the preloader content. Once all of your content has been loaded (optionally just the content above the fold) do an outro animation for the preloader and show the actual page content. Make sure the overflow is back to its normal value. I am not aware of React libraries to help with this. I'm sure there's something for it out there.
  10. Hey Victor and welcome to the GreenSock forums. The main issue here is that you only have one timeline and are targeting all of your targets with that. What you should do instead is loop through each of your targets and create an animation for each that is scoped to that element. To learn more about that, check out my article about animating efficiently. This article shows how to loop through an array of refs and do an animation for each one. I highly recommend you go through it Sides notes: You don't need to import TimelineLite. Just import gsap as the installation docs cover and use gsap.timeline() - no new needed either. You can leave out all of your durations since 0.5 is the default duration. I recommend using GSAP's defaults to set the default ease to none for your timeline.
  11. Hey Shehzad. You're making one of the most common ScrollTrigger mistakes: using a general target when you should be using a more specific target. Additionally you're not scoping your animations to a per-section basis. I talk about how to do this in more detail in my article about animating efficiently which I highly recommend. You also didn't put some properties in the timeline's defaults property which I assume you meant to do. Here's how I'd set it up: https://codepen.io/GreenSock/pen/bGpZejK?editors=0010
  12. ZachSaucier

    SVG Line rotation

    Another solution is to adjust your SVG, especially the viewport, to be able to contain all of the rotated line. Depending on your use case one solution might be better than the other.
  13. No need to be sorry! Look in the console: it tells you that slides is not defined. This is because your variable is scoped to that function so you can't access it outside of that function. To fix that create a variable outside of your function and save the .delayedCall to that variable. Here's how I'd set it up: https://codepen.io/GreenSock/pen/jOqJbRd?editors=0010 Side notes: Please use the "fork" button when making new versions of your pen so that context is retained in these forums Use xPercent instead of x: "100%". See the most common GSAP mistakes for more info. Include the duration inside of the vars parameter because that lets you use GSAP's defaults functionality.
  14. You need to clear the props you set before doing the calculations again: https://codepen.io/GreenSock/pen/JjXzYdg?editors=0010
  15. Think about how to do that logically: if you keep the infinitely looping animation that you're creating at the start then you need to be able to control that loop with the ScrollTrigger. How do you do that? First you need to save the tween (.delayedCall) to a variable. Then inside of the ScrollTrigger callbacks you affect that variable. I'd probably create it so that the ScrollTrigger is the only thing that creates and kills the delayed calls. Do you think you can modify your pen to fix the issue based on that info? If you're not able to get it working I'm happy to help out but I don't want to just do it all for you since you learn it a lot better if you do it yourself
  16. Hey krattus. I'm a bit confused. What does this have to do with GSAP? GSAP works great on iOS even in iframes so the issue has to be with some code on your end. Am I missing something?
  17. You'll have to position the third panel underneath the second panel from the start. Then when they reach the top of the viewport you pin the third panel for the duration of the second panel leaves the viewport.
  18. Hey Rinku. We already showed how to do this in this thread: Let us know if you have a specific question.
  19. Hey Love Kumar and welcome to the GreenSock forums. I recommend that you look into Globekit. Otherwise you'd need to create your own 3D Earth.
  20. Hey DM81. There's serious logical issues with your code: every time that you enter the ScrollTrigger a new nextItem function call will happen which will in turn repeat itself infinitely and keep playing the slide change more and more often. That's not good. What's your end goal? Why do you have a ScrollTrigger here at all since you're already looping the slides on page load?
  21. Write your code in a loops through each instance of your slider and sets things up with properly scoped targets to that slider. I talk about how to do that in my article about animating efficiently. We cannot help you with every step of your project. As I have stated in the other threads you need to take the time to understand what's going on.
  22. Hey Dev Patel and welcome to the GreenSock forums. How about this? https://codepen.io/GreenSock/pen/YzyqVNe It's one of the many effects listed in the demos section of the ScrollTrigger documentation.