Jump to content

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

ZachSaucier last won the day on December 1

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on December 1

ZachSaucier had the most liked content!

Community Reputation

5,468 Superhero

About ZachSaucier

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

7,227 profile views
  1. Hey guiferviz and welcome to the GreenSock forums. GSAP plugins tend to be for animating a specific property. If I were tasked with doing what you are trying to do I might just create some functions that return an object with the necessary vars. Then you can concat that object with another object if necessary. Something like this: https://codepen.io/GreenSock/pen/qBaOBZX?editors=0010 You might also be interested in the knowledge that GreenSock is soon to be releasing a FLIP plugin that makes transitioning between states a breeze. It's likely going to be a Shockingl
  2. Hey gareth. You should make sure to kill this timeline if the content has gone away. If you want to kill all of the animations on a page you could use gsap.globalTimeline.clear().
  3. As I said before, it's a logical issue that we don't have time to investigate for free.
  4. ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way. The demos above (and in the threads linked to) are experiments as to what is possible.
  5. Hey Kezart and welcome to the GreenSock forums. I cover how you can approximate this sort of behavior in this thread: However, as stated in that thread ScrollTrigger isn't really built to do scroll jacking like what you're wanting. As such we can't really help you past what has already been said in the thread above and others like it.
  6. It's doing what you're telling it to do. Perhaps you want something like gsap.utils.wrap(-totalWidth, innerWidth).
  7. Hey Simon and welcome to the GreenSock forums. The difference between the two approaches in your demo is that in the first approach (".card") you're selecting a node list of elements as the target for a single tween. In the second approach, you're creating a tween for each .card element and then sequencing them in a timeline. See the difference? The equivalent of the first approach using an array of element references instead of a selector string would be to simply pass in the array that you have like so: tl.to(cards, { xPercent: -100 * (cards.length - 1), ease:
  8. Hey nullhook. Most likely you will need to pause any animation of the content while the user scrolls. Then start it again once scrolling has scrolled. You probably want to listen for the wheel event and, if you want to support touch devices, either use draggable or something like HammerJS to add touch support. Unfortunately we don't have the capacity to debug projects like this for free. Or maybe someone else who is able to help out will stop by. If you have a question about GSAP itself we're happy to help!
  9. Hey hybrid09. How do the images that you provide relate to the demo that you have provided?
  10. Hey Guido, welcome to the GreenSock forums. Again, ScrollTrigger is not built for scroll jacking like this. It's not officially supported, the demos above (and in the thread I link to below) are experiments as to what is possible. Perhaps this thread is more relevant to what you're trying to do:
  11. Hey maxvia. This is a browser-level restriction: you can't animate a background-color from any direction in any browser with any tool. With that being said, you can fake it by making an element within the element look like the background and then animating that element. Exactly how you should set it up and animate it depends on the exact effect that you're going for. Here's a super simple example: https://codepen.io/GreenSock/pen/qBadQYo
  12. Hey mvaneijgen. In situations like this the best solution is to probably use a loop and a master timeline instead of using GSAP's staggers. GSAP's staggers are not intended to be used in this way with some properties being optional in some of the staggered tweens.
  13. We'd love to see it! Some questions are easier to answer than others. Feel free to give answering a shot
  14. Hey SLSCoder. I highly recommend that you read the most common GSAP mistakes and tips to animate efficiently as they both cover this issue and others that I think you'd learn a lot from. Some notes: In situations like these you want to create the animation ahead of time and use control methods to manipulate it. You should avoid putting JS functions and CSS inline. I would use semantic HTML (using a real <button element> and not using a <br> for spacing). You should use the position parameter instead of delays for tweens in timelin