Jump to content

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

ZachSaucier last won the day on January 23

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. Hey deodat. Unfortunately helping you with the React port of your CodePen is out of scope for these forums. With that being said, if you make a minimal demo of the issue in React (using something like CodeSandbox) often times people will help you out anyway in these forums
  2. Hey @justanothergoonie. You should not include the CustomEase.min.js file in a public repository as it is not a public file. It is a free plugin, but one that requires that users sign up for an account on GreenSock.com. What you should do instead is to download the ZIP file from the GreenSock website while logged in. This will include a .tgz file that has GSAP along with CustomEase. Then install GSAP to your project via that .tgz file. You can then share the .tgz file with your partners outside of a public repository (i.e. don't include it on GitHub). So long as it is installed via
  3. So is your issue seen in the demo that you posted or are you saying that you're just having an issue implementing that demo in React? If you're having issues with the approach itself (i.e. not the React implementation) perhaps it'd help to look through these relevant threads: If you're saying that you need help with the React implementation specifically, please create a minimal demo of the React version and explain where you're getting stuck. Happy tweening!
  4. I'd probably approach it like I said above:
  5. Do you mean like this? https://codepen.io/GreenSock/pen/LYRweWJ?editors=0100 You'd need to structure things a bit differently to do that sort of thing. I'd probably create a timeline that does all of your animations in it (completely ignoring ScrollTrigger). Then when you create the timeline the way you want the animations to go I'd create a ScrollTrigger, attach the timeline, and do the pinning as necessary.
  6. Hey Crystal and welcome to the GreenSock forums. You've got a great start! Your approach is pretty much the right way of doing things, though personally I think it's a lot easier if you just animate properties directly with GSAP instead of toggling classes. That also will let you have more fine control over how things are animated. One other note is that you're attempting to tween an element with ID title3 but you don't have that element in your HTML. Maybe you meant to apply it to your .fade-div element?
  7. Hey Fritz1602. Good work so far! A few notes: ScrollTrigger automatically refreshes on resize so you don't need to add that functionality yourself. If you find yourself doing something like onEnter: () => tl.play() inside of a ScrollTrigger you should probably think about if you can change your ScrollTrigger to use the animation and toggleActions properties instead. You can in this case If you want values in an attached animation of a ScrollTrigger to update on refresh, you should use invalidateOnRefresh: true. Also make sure that the properties that you wan
  8. Sure. Also in the ScrollTrigger demos section are several demos related to "parallax". Search for it there and you'll find several demos showing how to do that sort of thing
  9. @Ahmed Khalil No, that website does not use fullpage. It's a different effect. @SumitKKundu We have a demo like that listed in our ScrollTrigger demos section: https://codepen.io/GreenSock/pen/YzyqVNe
  10. Yep. Your target can be a DOM element, a nodeList, a jQuery object, a selector string, or an array of any of the ones listed previously.
  11. You can do the same sort of thing with any tools that render WebGL (Pixi, Three, OGL, etc.). I used curtains because it's relatively lightweight for doing some image effects and handles the syncing with other DOM elements for you but keeps you from having to write that yourself. The main thing that you'll have to spend time learning is how to write fragment and vertex shaders.
  12. The steps for how to create any ScrollTrigger animation: Create your animation as you want it to behave. In this case it probably makes sense to create a timeline that animates in your elements in a sequence. Attach that animation to a ScrollTrigger, adjusting the start, end, and other properties are you need to. That's it How about you try doing those steps in that order with your demo? If you have a specific question let us know and we'll do our best to answer it.
  13. I would use a ref The only alternative is if you have some reference to a parent of your elements that you're wanting (like a DOM reference to the outermost element of your component) then you use .querySelector() on that DOM reference.
  14. I'm not sure why you're attempting to use the callbacks at all. Using just the toggleActions does what I think you're wanting: https://codepen.io/GreenSock/pen/MWjNpqO?editors=0010 Perhaps it'd help you to go through the ScrollTrigger docs and intro video again.
  15. If you need things to be split again then you can re-split after you .revert() the old splits. Welcome to the forums! Thanks for supporting GreenSock with a Business Green membership.
  16. Without context it's impossible to say for sure, but you need to calculate the offset based on your element's positioning and your ScrollTriggers. There are more examples in the ScrollTrigger demos section for reference.
  17. A few notes: I'd probably use a single timeline outside of your event listeners/callbacks and and use control methods inside of your callbacks (like .play() and .reverse()). This is one of the keys to animating efficiently (I highly recommend the whole article). You shouldn't have multiple elements with the same ID on your page. That's invalid. Instead you should use classes. To have multiple instances of this on your page you should make use of Vue's refs.
  18. Hey Ali. You're passing in a timeline to your callbacks (like onEnter, etc.). Callbacks can only be passed functions so you probably want to pass in something like this: onEnter: () => s2_enter.play() Reading the docs or looking more closely at the demo that akapowl shared can teach you about that
  19. Hey fd_alistair. A few questions about your end goal: Are there set points of where users will be able to do this? or can it be anywhere along the object? Is there a limit of how many "cuts" a user can make? Are you simply wanting to cover the original object (i.e. layering) or does it actually need to cut up the original shape into multiple shapes? How does the user specify where to make a cut? A pre-made draggable? A click/touch somewhere? Something else? Once we have a better picture of what you're really needing perhaps we can help lead you towards a relevant
  20. Hey Lichay. Again you have multiple things going wrong. I highly recommend spending more time reading the docs and trying to understand existing demos to try and get a firmer understanding of how things work in GSAP. As it is, asking us every single question that you have is much slower than learning how to properly read the docs. It will save you time to learn how to properly use the docs. Your mistakes: It doesn't make much sense to apply a ScrollTrigger to a timeline that is created on click. You should probably remove the ScrollTrigger. Applying .delay() to a timel
  21. Hey PTiCA and welcome to the GreenSock forums. I'm not sure what you're really asking. Can you please try to rephrase your question? If you're asking how to create the same sort of effect as the page that you linked, GSAP's Draggable plugin is going to be key but most of the actual logic you'll need to write yourself.
  22. Hey nexadesign and welcome to the GreenSock forums. That link goes to a 404 page for me. With that being said, there are a lot of carousels made with GSAP out there. I recommend that you search through these forums and CodePen to find one similar to what you want to start from. I also recommend that you go through the Getting Started article, my article about animating efficiently, and the most common GSAP mistakes to learn more about how to use GSAP
  23. Hey Reagan. If I open your demo then click the center button the monkeys are shown with a stagger animation from the center most monkey. With that being said, there is a logic issue if you click on any button before a previous button finishes. You're using a relative .from() tween each time which means that the end state will be the one when the button is clicked. That's actually one of the most common GSAP mistakes. There are a few ways of fixing it, but probably the easiest would be to use .fromTo() tweens instead.
  24. I understand. But you'll have to implement that sort of logic to create this effect.