Jump to content

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

Cassie last won the day on May 17

Cassie had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. noted - I'll make sure to add 'people to follow' to the learning center.
  2. Well it looks like you can achieve that with scrollTrigger too 😉
  3. You can horizontally scroll elements with ScrollTrigger like this ☺️ https://codepen.io/supah/pen/BamxgBb
  4. Adding a small note of recommendation for Joe as a generally nice human and good person to work with.
  5. This thread may help nudge you in the right direction though - Good luck!
  6. Hey there Nicolas, You can use media queries like so. Good luck with your project! https://codepen.io/GreenSock/pen/GRQENyo
  7. Hey there. Not sure about this approach - maybe you have your reasons and I'm not understanding, but if you're using scrollTrigger there shouldn't be any need to listen to the scroll event anymore and write custom JS logic like this. If I'm understanding the goal - maybe just use a timeline? https://codepen.io/GreenSock/pen/MWQoboQ?editors=0010
  8. Ah! I see - I think the issue here is that GSAP doesn't make our own 'components' like webflow, tailwind reflume etc. And we don't have the right to share code from people's live commercial websites. I'm planning on making an area to search for UI patterns in the learning center, but those will be more along the lines of minimal functional demos. Mainly to show how the GSAP side of things work. e.g. this draggable slider https://codepen.io/GreenSock/pen/PojYwPp Whereas It sounds like you're looking more for polished, designed, production examples for inspiration. But also access to the code. That's a tricky middle ground because it's up to the developers (and clients) whether they open source the code and many are under NDA. for 'building off' codepen is probably the best place to go for this, for 'get inspired by' (if you're looking for real world live websites) that would be awwwards or our showcase. It's pretty hard to bridge that gap in between. I'll ponder on it! Thanks so much for the input.
  9. const parallax = gsap.fromTo( element, { translateY: `${amount}vh` }, { translateY: `-${amount}vh` } ); ScrollTrigger.create({ trigger: element, start: `top-=${amount} bottom`, end: `bottom-=${amount} top`, animation: parallax, scrub: 0.3, markers: true }); Adjusting your start/end values is probably what you're after?
  10. Hello! That's a lovely site, well done. I'm afraid I can't tell you how long it will take you as I don't know how much free time you have, what you know, or how quickly you code. From a GSAP perspective, this will help - https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia() And from a styling perspective this will help https://web.dev/responsive-web-design-basics It's very common for people to cut down on animations and simplify layout on mobile - I do. Bear in mind that people on mobile are usually in a hurry, on the move, on limited data connections and just want to access content quickly. It's not a failure to simplify things, in fact it can help the end user - if that helps you get the site finished in time that's a bonus! Good luck
  11. Hey there! Have you added the scrollTo Plugin to your project? https://greensock.com/docs/v3/Plugins/ScrollToPlugin
  12. Only a small thing. You'll need to replace 'className' in the HTML with 'class' Great job getting that sorted! 🥳
  13. Heya! The helper function used is here - https://greensock.com/docs/v3/HelperFunctions If you want to get rid of react in that demo, you're on the right track, pull everything out of the useEffect, get rid of the app function and use document.querySelector instead of refs ☺️
  14. Also no need for it to be a whole React demo if that will take longer. Just some divs and the GSAP code would be great! Thank you.
  15. Hey there! Please can you put together a minimal demo for us. It's very hard for us to recommend a good approach without seeing the whole picture. I imagine the answer will be to add a containing div and animate the element inside though.
  16. Oh also maybe? https://www.awwwards.com/websites/?award=sites_of_the_day&technology=gsap-animation
  17. Hey! We have curated codepen collections - is that kind of what you're after? https://codepen.io/GreenSock/collections I'm interested in hearing more about what you're looking for and also where you searched - I'm aiming to do a bit more curation of our content in general. Feel free to get very specific - it's likely to be helpful information
  18. Codesandbox is usually good for framework type demos - This should get you going https://codesandbox.io/s/funny-sunset-f8yn6q
  19. Hello there! If you look in the console it mentions that you need to register the plugin. Pop this in your useLayoutEffect gsap.registerPlugin(Draggable) We also have a guide here which may help you!
  20. If you navigate to a new page in a SPA you're technically not refreshing the page, the content is just changing - so you'll likely need to call scrollTrigger.refresh() I'm not quite sure about this particular snipper - it's hard to understand without context which is why we ask for minimal demos. Glad you got it sorted though! If it works it works
  21. Hi there - not sure what the question is. Can you elaborate?
  22. I'm afraid if it works locally but not once you've deployed it it's unlikely to be an issue with GSAP itself and more likely to be something going wrong with your build. You've got a fullpage.js error in the console, but no GSAP errors.
  23. Hey there! You should just be able to set scrub:true on any scrollTrigger. Could you provide an example of it not working and explain what your dilemma is? Thanks!