Cassie

And yeah, I'd recommend starting off getting the basic demo working then angular-ize it.

If you go to the settings panel you can add libraries Here's a starter pen with all the links - https://codepen.io/GreenSock/pen/OPqpRJ Also, I would start off by getting rid of the base 64 image and adding a image tag in the SVG, it'll be a lot less confusing to work with - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Hi there! I would love to help with this. Would you be able to make a stripped back demo in codepen so we can help you debug?

Our pleasure! ?

Hi there @liamny Welcome to the GSAP forums! ? FYI - I made a little tweak to the CSS in your pen so I could scroll on my device. Setting the container to 200vh instead of a pixel value. You weren't far off a solution! I couldn't recreate the issue you were having with the button but the syntax you currently have can be simplified a little, maybe this will help? gsap.timeline({ scrollTrigger: { trigger: ".button", end: 'bottom', toggleClass: "blockDiv", } }); For the tip - the magic is all in toggleactions - This determines how the animation is controlled as it toggles in and out of view. You're looking for toggleActions: "play reset none reset" This will play when it enters the viewport - reset when it leaves, take no action when scrolled back into view, and reset when it leaves again (scrolled all the way back). Here's an adjusted codepen. Hope this helps! https://codepen.io/cassie-codes/pen/25cc28b1d8952dd12f460a7fd63cf807?editors=0010

Hi Stefano! This one was a puzzler and I learnt something too today. ScrollTriggers are created when the page is initialized so the values get locked in right away - in your case the css variables are animating from the initial value set in the css. You can set immediateRender:false on your tweens to stop this from happening. https://codepen.io/cassie-codes/pen/1a53411eb2ef9f0272809f2ea34a50c5?editors=0010

Ah that makes a lot of sense! Ignore me on that front then Alex, as you were!

Hi Abhijeet, This is a beautiful but complex effect - it's unfortunately out of the scope of these forums to teach you how to recreate this. If you have a codepen that we can look at and a specific GSAP question we would be happy to help. I assume you've checked out the Draggable docs?

As @akapowl said - the first parameter in your start always refers to your trigger-element; the second refers to the viewport. I've added some comments into this pen so you can see what's going on with some complex relative values. https://codepen.io/cassie-codes/pen/6ae71479d744600ab98a90940cca54c2

Hi Alex, You're right about the padding! By default, when you pin an element, padding gets added to push other elements down so that when it gets unpinned, the rest of the content flows in nicely. Your CSS is set up perfectly - I think the confusion comes in where you have two separate scroll-triggers unnecessarily. Here's a little example that (i think) does what you want? https://codepen.io/cassie-codes/pen/c49f9997ea9ec4b9b9d8dde1b444d16e

Pleasure! Timelines are definitely the little bit of magic you're missing! Let us know how you get on. ?

Hi Chris! ? Glad you're enjoying GSAP. The main issue you have here is that you're using a tween ( gsap.to ) instead of adding tweens to a timeline. In order to get sequenced animations you have to pop tweens onto a timeline. Timelines act like a container for your tweens and allow you to sequence them! Super powerful stuff. This tweak doesn't entirely fix your problem - but it's a step in the right direction. https://codepen.io/cassie-codes/pen/5c5206d9aa66ec987eecda2ac1cefcd0?editors=0010 The second issue (and the reason the above fix isn't quite perfect) is that you're using both CSS animations and GSAP. You *can* do this, but it's more trouble than it's worth, if you're already using a GSAP timeline it's a lot easier to go all in and pop everything on it - then you have single source of truth for animations, tweens that you can position nicely and much tidier code. Aside from the docs I linked to this article is a great place to start. I hope this helps. As you're new to GSAP I would suggest starting with breaking it down and focusing on the text timeline first - then adding in the images. It would certainly be easier to work out what's going on.

https://codepen.io/oliviale/pen/ymbmqa?editors=1010 I agree with Zach, I emphatically suggest you don't try anything like my pen in production. It's pretty horrific on performance! But this pen from Olivia is a similar effect, very simple and much less of a performance overhead. Just stroke animation and a little glow filter.

This is super cool. Look at these trees! ? https://subprotocol.com//system/tree.html

Thanks for all the help folks!

Yeah, that's really cool. Not quite what I need though. I don't need to join them up with a path, and there's 20 baubles with 30 or so shapes on each 'string'... so I don't really want to have to hand code the x and y values for each shape. I'll carry on experimenting! (also blake is mad clever)

Hey folks. ? Having a bit of trouble with how to approach this. A client's asked for some x-mas baubles to "drop in all dangly" from the top of the screen, I've made a rough SVG of the structure of the bauble. The 'string' is made of circles (and other shapes, like little ribbons and bells and stuff) instead of a path. I was looking at the physics plugin, (in the attached codepen) But it kinda needs a bit of a bounce ease? And you can't mix physics and eases... Has anyone done anything like this? Any ideas of a good approach?