Jump to content

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

Cassie last won the day on October 20

Cassie had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. Are you possibly looking for repeatDelay? https://codepen.io/GreenSock/pen/MWvbZva?editors=0010 I'm not certain your approach with the callback is ideal though. Could you explain a little more concisely what you're trying to achieve? (It's a little confusing as you don't have any rotations in your demo.) Maybe lay out the steps like this so we can advise? - rotate from 0 to -90 - pause - rotate between -90 and 90 - pause - ? I also noticed that you're using deprecated syntax. Check out the migration guide. https://greensock.com/3-migration/
  2. Hi there! I guess it depends on what you're trying to achieve. Could you maybe assign "xyz" to a global variable instead?
  3. Hi Henrik - It's a little wonky, as I did it quickly. But you'll probably get the best result by creating a square with extra points halfway down the sides, then copying it and pulling those center points in to create the diamond sqdi.mp4 https://codepen.io/GreenSock/pen/jOLVeoa?editors=1010
  4. Cassie

    Multi-part slider

    Yeah, 100% - Blake's right, absolutely positioned text on top. Don't think of it like a slider. Just think of it as an animation timeline and break down what each part is doing individually.
  5. There's a huge amount going on in this codepen - It would take me quite a while to work out how everything's working. It's often helpful to simplify things down a bit. At the heart it's just a timeline and the buttons/dragging are updating the progress. Strip everything out and focus on getting the timeline working as you want it first! https://codepen.io/cassie-codes/pen/07d8d1dcbea7d097592589ebcdeb52aa?editors=0011
  6. You're probably more likely to get help over here 👀 https://community.magento.com/
  7. Sure - the scale itself will just be something along these lines - very simple. gsap.to(object, { scale: 2, }) If you try to do this with HTML elements you'll may end up with pixelation or juddering though. It would be quite hard on the browser. This brings us back to the rendering side - They're adjusting properties of three.js objects. The hard bit will be creating the three.js scene.
  8. Just a note that the demo you provided is using some membership Plugins, you can use them on codepen for free but should you need to use them in production you'll need to sign up to club GreenSock for access.
  9. I'm not sure how else we can help. The demo you posted is already functional and doing what you'd like it to. All that's left is to style it. I'm afraid we can't help you there but if you need assistance maybe someone in the freelance forum can help you.
  10. That's pretty standard browser behaviour. if you've scrolled the entire 800px distance of an 800px high browser window and then resize the browser to 1200px height, you'll still only have scrolled 800px of that height - if you map an animation to that scroll distance the progress will be affected. You can hijack that, sure - but that's just JS logic, not GSAP specific. https://www.javascripttutorial.net/dom/css/get-and-set-scroll-position-of-an-element/#:~:text=To set or get the,is (0%2C 0) .
  11. var animation = gsap.timeline({paused: true, repeat: -1,}) animation.to(slides, { xPercent: "+=" + (numSlides * 100), duration: 1, ease: "none", modifiers: { xPercent: wrap } }); Hi Knalle - Sure. Like this?
  12. If I'm understanding correctly, you could write some conditional logic? Like this? https://codepen.io/GreenSock/pen/KKvgVzd?editors=0011
  13. We also have a freelance forum if you need assistance with implementation! Good luck with your project.
  14. Hi renny, That demo looks like a good start - if you have any specific questions about the GSAP code used in it we're happy to help - but we can't help provide custom solutions for you in these forums.
  15. Hi GeS, If it's working in codepen it's definitely not an issue with GSAP. I'm afraid it's out of the scope of these forums to help debug issues with your local setup.
  16. Cassie

    Multi-part slider

    Hey Jloafs. This looks like a fun challenge! Glad to see you're a club GreenSock member too, you've got *all* the eases and fun stuff at your disposal for this. Right, so let's get an approach sorted - In my opinion the best place to start here is with a pen and paper. 1) Slow the video right down, or drag through, and draw or write out the steps. I'm visual so I sometimes print out screengrabs and doodle over them. If you're more of a logical person maybe pseudo code or step by step instructions. 2) Get the layout nailed. You have text that's being 'masked' so you'll need the text in overflow:hidden containers. Same for the images. 3) Make an animation timeline, get the easing sorted - don't worry about interaction. 4) Hook up the buttons - they look to be just playing and reversing the timeline, but even if you need to skip to certain labels or points in the timeline this is all manageable with timeline methods. Does that help?
  17. Hey there Renny, Maybe this demo will set you off in the right direction? https://codepen.io/PointC/pen/YRzRyM
  18. If you just want to scrub for the length of the pinned-content div you can do this... let tl = gsap.timeline({ scrollTrigger: { trigger: ".layer-story-pinned-content", scrub: true, pin: true, start: "top 30", end: 'bottom top', markers: true } }); Does that help? Alternatively you could use functional values let tl = gsap.timeline({ scrollTrigger: { trigger: ".layer-story-pinned-content", scrub: true, pin: true, start: "top 30", end: () => `+=${elem.offsetHeight}` markers: true } });
  19. Hey there! Could you possibly explain the following a little more? specifically what 'it' is in this situation? Are you referring to a timeline?
  20. Hi Pixelcaps - Firstly. Is there a reason you're using GSAP 2?
  21. Hi there! I assume you're using the latest version - since GSAP 3, ModifiersPlugin is included automatically, so you just need to load GSAP's core. https://greensock.com/docs/v3/Installation