Jump to content

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!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. I think you're looking for CSS scroll snapping rather than scrollTrigger snapping? ScrollTrigger's snapping is set up to snap to certain progress values in a timeline - think of it as snapping to certain points in an animation rather than points in a page. Here's a good example - The horizontal 'scrolling' is actually a tween on the x axis and the snaps are set to certain points along that animation, those points correspond to the times that the sections are in full view - so it looks like it's snapping to the sections. https://codepen.io/GreenSock/pen/cab879e04d29d1e8ff3014ff2703cb74
  2. This was a masterclass in animation perf. Thanks Jack.
  3. Heya! Great job, this is looking smashing. Just FYI you have references to TimelineMax, TimelineLite AND GSAP in here. in the docs, make sure you have version 3 toggled - TimelineMax and TimelineLite are references to the older syntax - they're bundled up into one API now. You're right, isActive is what you want - I've added some onComplete calls here in your tweens to toggle a variable. It should be a step in the right direction. https://codepen.io/cassie-codes/pen/d75d0a47d1f331878f408c3b06b54978?editors=0011 *edited because I attached the wrong link
  4. The small question mark is because you're requesting an image that isn't there, check that your image paths are correct. ☺️
  5. Extreme same here. I animate a lot less on mobile. It's also better from a UX point of view, people on mobile sites are usually on the go and just after some information - no need to mkae everything whizz around.
  6. Timeline first and then hooking it up is almost always the way to go! Glad we could help! And thanks for this. ☺️I've got two talks this week - I sometimes get a bit stressed in advance and forget to focus on why I do it. Super happy to hear they've inspired you. Worth the nerves!
  7. Yep, I have 'include a mention of the free tier' on the club GSAP page in my notes. A few people ave brought this up in user testing so far!
  8. You did a great job! I get what you're trying to do. Explaining what you're trying to achieve is often easier than trying to ask for help with your solution because people can recommend other approaches then! I think the way you're approaching this is overcomplicating things. This won't be the exact effect you're looking for -the values will need tweaking, but I reckon setting the SVG to postion fixed and then animating the line within that SVG to where you need it to be is going to be a lot less buggy than trying to calculate heights and distances and layout. Her
  9. You'd probably have more luck with a timeline... https://codepen.io/cassie-codes/pen/35956516e6831ec8903c034145a7ce35 But as I said before when you first posted - if you're trying to move an element between states, the FLIP plugin is what you're after. If you're just using this as an exercise in learning GSAP and moving elements around it might be an idea to start here with our getting started article, then have a look at the scrolltrigger demos or docs
  10. You can - but you would have to use the yellow path as a mask and then animate a thick stroke positioned 'behind' the mask. I wrote about this technique here
  11. My performance testing lies very much in the 'does it look jerky' and 'is my laptop fan making noise' camp. You can test FPS using gsap.ticker - maybe that helps? Although, it's good to be aware that it's often not a hugely helpful metric var fps = gsap.ticker.frame / gsap.ticker.time; I think this is probably a good question for Jack though - @GreenSock
  12. This isn't actually horizontal scrolling. It looks like that site is listening for touch or mouse wheel events and then advancing an animation. I would probably start off by creating the animation timeline. Then once that was looking how I wanted I'd use event listeners to listen for the right events and then advance or reverse the timeline as needed.
  13. Can you add a minimal demo of what you've tried Arual?
  14. https://codepen.io/cassie-codes/pen/8a2b93488881f6b89f6c82d8b4eac40c I'm not sure exactly what you're trying to do here - your demo has quite a lot going on. But here's a little demo of a tween with a functional value and the invalidateOnRefresh property. I've added a listener to update the width variable too, hope this helps?
  15. I'm sorry pal, I'm not following this. what is it you're trying to achieve with these values?
  16. If you're finding the learning curve steep I recommend starting here.
  17. 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/
  18. This is lovely to hear ☺️
  19. 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
  20. 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
  21. 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?
  22. 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.