Jump to content
GreenSock

Cassie last won the day on October 4

Cassie had the most liked content!

Cassie

Administrators
  • Posts

    3,545
  • Joined

  • Last visited

  • Days Won

    133

Everything posted by Cassie

  1. Hiya, that's pixels, yes. You can see what/where the triggers are if you add markers. In this case it's the text defined in the tween and it's triggering as soon as the top hits the bottom of the viewport. https://codepen.io/GreenSock/pen/JjvXMWQ
  2. Hey again. Good attempt, nicely done! So, I think you'll probably be best off looping around all the Lottie's and creating an event listener for each one. Then you can change the position of the clicked Lottie element to fixed to 'enlarge' it. I don't think reparenting is really necessary. I've also popped the onClick events off the div's, we can just call play when the FLIP animation is called. Hope this helps! https://codepen.io/GreenSock/pen/abGjbWM?editors=0111
  3. That's not really a big issue. The animation will only last as long as you're scrolling within that section. I wouldn't worry about that.
  4. Hi there! I'm afraid that's not a simple animation at all. It's making use of shaders. Shaders are beyond the help we can offer in these forums but here's a collection of resources to get you started if you want to do a deep dive. It's likely to be a big learning journey rather than a copy-paste though. https://www.awwwards.com/awwwards/collections/shaders-are-easy/
  5. You can make it less 'approximate' like this. Hope it helps. https://codepen.io/GreenSock/pen/RwVGNea
  6. Heya, Glad this is all being resolved nicely. I'd say this is correct, the distance the page has scrolled is different from the distance that container has moved as it's been pinned initially. With this challenge I'd definitely lean on FLIP - Flip's great for complicated layout stuff like this. I'm guessing that if you're wanting the element to go 'fullscreen' you want it to be fixed? You can animate between two elements with FLIP, or if you wanted to avoid duplicate elements you could reparent the element into the body so it can be fixed outside of the smoother container. Something like this maybe? https://codepen.io/GreenSock/pen/GRdGPrQ?editors=0011
  7. Maybe something like this? https://codepen.io/GreenSock/pen/eYpGLYL
  8. Hi there - this is a design decision - all items will be at their correct alignment when they hit the middle of the browser window. However, this does mean that if the elements are already in view then their animation is 'in progress' at the time the page loads. This isn't always ideal. I'd suggest using a scrollTriggered timeline for elements about the fold. Like so - https://codepen.io/GreenSock/pen/jOxKbxv?editors=1010 Does this work for you/help your situation?
  9. Kapture 2022-10-03 at 14.49.55.mp4 A little video that may help you or people in the future https://codepen.io/GreenSock/pen/poVKjjL?editors=0010
  10. Heya! Just adding that there's nothing wrong with a little repetition (in my opinion). I think some people get too hung up on that and make their code less readable. I tend to focus on readability first. For instance, I'd keep your timeline declaration with the timeline it's controlling. You could use defaults to set a global toggleAction, but honestly it's fine to just define that per timeline. Sometimes global defaults aren't the best solution as they'll affect all your timelines in that project! https://codepen.io/GreenSock/pen/rNvKVZv?editors=0010
  11. That's so nice of you to pop back in with some gratitude, thanks Matt 🥰
  12. bumping @Prasanna again (sorry for multiple bumps but I'm not sure of how to help here)
  13. Cassie

    SVG animation

    Ahh I love him, that's a fun exercise!
  14. You should just be able to replace the image with a lottie container (or the inner SVG) without issues, they're just DOM elements after all! Pop back if you struggle after watching that mini tutorial ✨
  15. I reckon most things are achievable, it just takes a little bit of thinking outside of the box sometimes. ScrollTrigger/ScrollSmoother/FLIP (a lot of the new GSAP3 tools) are different beasts to old GSAP - we certainly feel this from a forum perspective too, the complexity of the animations people want help with nowadays is far beyond what it used to be. It's not that the tools are broken, it's that they're trying to make a huge number of complex problems possible and trying to work around a lot more edge cases, there are so many more intertwining things to be aware of. We do our best to add in solutions where we can but as with anything code-wise there will always be limitations to work within. It's mega frustrating when you hit those limitations though. I've been there. That being said. Solutions! Ok... So here's one idea, pinning the entire content is going to cause issues, but you need the initial content visible and static underneath the 'slide'. So maybe pop that first section of content out into it's own container, make sure it's 100vh and then allow the rest of the content to catch up after it? https://codepen.io/GreenSock/pen/rNvdvXp?editors=0110 Anther option is to create a big animation timeline that does what you want - then hook that up to the scroll. It doesn't work for everyone's use cases but it can sometimes make otherwise impossible things nice and simple.
  16. Hey there! So the one way that I can think of is extending out the 'hitbox' of the link so that there isn't any overlapping white space in between them. You could add a styled div inside the link to make it look like there's space between the buttons, but in actual fact the links are pressed right next to each other. The other way would be to show the 'mega-menu' when the UL is hovered, but swop out the content depending on which list item you mouse over. Definitely more fiddling around with layout and JS events than GSAP!
  17. Cassie

    SVG animation

    Sure you have it covered, but it's fun to discuss. Simplest thing I've found is a direct comparison to background-size and background-position. That seems to click for a lot of people. That and making it clear what the SVG element bounding box is as opposed to the viewBox. I have a little UFO in my workshop and I make people float it to the top/bottom left/right to get used to the values.
  18. Well the helper function covers everything you could possibly need to do horizontal looping, and it does it all for you. Here it is simplified down without the controls. Is there something it particular that you're confused about? https://codepen.io/GreenSock/pen/eYrMNQx?editors=0010
  19. Here's a helper function for you! https://greensock.com/docs/v3/HelperFunctions#loop
  20. Sorry you've stumbled on an issue. GSAP should certainly be working this out for you, (and will figure it out for you once we work out the problem.) Tagging in @GreenSock - He'll be able to help. Jack - Here's an even more minimal demo - you can comment in/out the ScrollSmoother code to show the issue. https://codepen.io/GreenSock/pen/BaxYXvo?editors=1010
  21. I think this is due to the lack of physical space to scroll into - I added a spacer and it allows you to scroll to the bottom. https://codepen.io/GreenSock/pen/KKRoKwr?editors=1010 @akapowl is the resident ScrollTrigger pro so I'm sure he'll have a better explanation!
  22. Cassie

    SVG animation

    Yeah I've been loving the SVG lessons! Really great stuff!
  23. They've hidden the scrollbar for aesthetics (such as many awwards site's do 😂) But actually Lenis itself doesn't hide the scrollbar, it feels like their site shouldn't hide it tbh as the accessibility of it is quite a good selling point.
  24. Ah ok, if you're using React it's going to be a little bit more fiddly, both to set up a demo and to get the animation working! That code you've provided above doesn't look valid. Here's a starting point - https://codepen.io/GreenSock/pen/PoeQePv?editors=0010 I suggest taking a look at our React guides too for a little more understanding of how to handle different situations 🥳
×