Jump to content
GreenSock

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

Cassie last won the day on June 13

Cassie had the most liked content!

Cassie

Administrators
  • Content Count

    515
  • Joined

  • Last visited

  • Days Won

    16

Everything posted by Cassie

  1. I'm sorry pal, I'm not following this. what is it you're trying to achieve with these values?
  2. If you're finding the learning curve steep I recommend starting here.
  3. Heya! The scrollTrigger docs are a good place to start. You'll be looking at something along these lines though... gsap.to(".section", { scrollTrigger: ".section", // start the animation when ".section" enters the viewport (once) backgroundColor: 'red' }); If you'd like any more help please create a minimal demo so we can see what you've tried. p.s. - There's a bunch of scrollTrigger demos here that are pretty useful to dig through and learn from - https://greensock.com/st-demos/
  4. This is lovely to hear ☺️
  5. https://cdpn.io/cassie-codes/debug/6a0f7e53c6cce68ef79cadab92d59681 check in debug mode to make sure it's not a codepen / iframe issue maybe try a background image instead? you could try adding scrub: (number) instead of scrub true to ease the scrubbing
  6. Sure. You can do it yourself but it won't be simple. TLDR - you have to calculate start and end positions and animate between them. FLIP stands for First, Last, Invert, Play. First: the initial state of the element(s) involved in the transition. Last: the final state of the element(s). Invert: here’s the fun bit. You figure out from the first and last how the element has changed, so – say – its width, height, opacity. Next you apply transforms and opacity changes to reverse, or invert, them. If the element has moved 90px down between First and Last, you would apply
  7. I'm finding it hard to visualise by reading through this I'm afraid pal. If you could put together a little codesandbox it would be a big help. Also, you're using an older version of GSAP. We definitely recommend that you learn and use GSAP 3 This is the bit confusing me the most, pinning is (usually) adding position fixed to elements to pin them, if they're already fixed I can't see how you're scrolling and pinning?
  8. Looks fine in firefox to me. What version are you on? Windows or Mac? Additionally, I assume you've got those three different divs animating to test whether there's a difference between rotations on different types of element? It's a good practise to get into when you're testing the difference between SVG DOM and HTML DOM - but in this case all the elements are divs, so you won't see any difference between them.
  9. Hi Nadia! ☺️ You can change the tween method to 'to' instead of 'from' and it will animate to those values instead of from those values. .to(".orange", { scale: 0.5, ease: "none" }) I recommend checking out the getting started page. After that, if you'd like any more assistance could you post a minimal demo of what you've tried?
  10. I'm afraid we don't have the scope to debug live sites in these forums. I doubt the issue is GSAP itself. More often than not this boils down to cross browser compatibility of layout or the properties you're animating. If you can make a minimal demo of one of the problematic animations we'll take a look and see if we can help.
  11. This looks like a problem for the Flip plugin and ScrollTrigger! Take a look at the docs and give it a bash. If you're still stuck feel free to come back with a minimal demo and we'll see if we can figure it out together. ☺️
  12. Heya! A little heads up - you're using an older version of GSAP. We definitely recommend that you learn and use GSAP 3. It's better in every way. Your approach seems a little convoluted to me. I'd probably keep the tweens and incrementing logic separate. Add or Subtract the page var on click and then control your timeline or tweens based on that number. In this example I'm using the number to target a specific block, but you could use the number to skip to a certain point in a timeline too? That may work for your use case. https://codepen.io/cassie-codes/pen/afa5ab6bdc8bb
  13. I'm afraid I'm a bit lost here as well. The SVG has quite a high width and height value specified on it, so if the issue is layout breaking that may be something to look at? If you're struggling to explain in words, maybe you can draw a diagram? Sometimes breaking down the steps gives you an idea of where to start.
  14. Heya, yep, this is definitely achievable. It's not the first time this has been asked - so luckily for you - this thread should set you in the right direction!
  15. This is a great demo - nice one @akapowl 🎉
  16. So, GSAP is largely a way to animate properties. What you need to figure out is which properties you need to animate and on what. e.g. is it SVG, canvas, shaders, DOM elements etc, and what are they animating? Short of looking into the source code it's hard to tell. It looks like they may be drawing an image to a canvas element and then stretching or displacing the image. I would probably look into using curtains.js? https://www.curtainsjs.com/get-started.html (Unless you want to do a deep dive into shaders and displacement maps! )
  17. There are lots of ways to approach this and it is a complex one. However the issue with the image taking longer to size up when there are more sections comes down to scrubbing and how distance = time when. you're scrubbing. If the x movement takes 1 second and the image scale takes 0.5 seconds, when you scrub the image scale will take half the 'time' or scrub distance that the x movement takes. You can get around this - albeit in a bit of a hacky way by making the distance value relative to the number of sections. e.g. let sections = document.querySelectorAll(".hrz-container.h
  18. Oh frustrating. That's gonna be something in your setup then. Hate it when that happens.
  19. I'm lost - I'm sorry. I'm not sure what it is you want to improve. I don't know what your intended outcome is.
  20. Hi Nadia! Welcome to the forums. We've got a getting started article here and the scrollTrigger docs are really great. If you're still stuck after having a read through, make us a minimal demo showing what you've tried and we'll give it a bash together. ☺️
  21. Sorry, I'm not sure what you're trying to achieve, can you rephrase that?
  22. Hi there - Just clarifying - are you saying you want to have more than one horizontal scrolling section? So it would scroll horizontally, then vertically, then horizontally again?
×