jimmymik

Thank you so much for this @PointC, very much appreciated. Sorry for slow reply, was trying to nail this before going away but didn't quite get there. Sat down with a fresh head now and have got it sussed based on your awesome example though, so thank you again.

Hey guys, I'm slowly getting my head around GSAP and absolutely loving it but now have a bit of a tricky one (at least for me) for which I'm hoping someone may be able to point me in the right direction. I setup a pinned section on a site that works fairly well and there are a couple of transitions within it that happen before the section "unpins" and continues down the rest of the page. Trouble is, the scrolls within the pin are controlling the transitions and looks kind of clunky... if you scroll slowly you can see the transitions... My question is... is it possible to make it so that scrolling to a certain point within the Pin triggers the full transition... i.e elements fading out/up, without being able to scroll through the whole transition? Apologies, not sure how to describe this any better but essentially the effect I need is kind of like this: https://alvarotrigo.com/fullPage/#page3 but within the pinned area. Not sure how to get all my elements into a codepen example but hopefully you can get the idea from the page itself here: http://containerizer.com/payadvantage/bpay/ go down to the "Add BPAY to your Xero Invoices" section and you'll hopefully see what I'm going for. Thanks in advance for any info.

Thank you guys, absolutely brilliant!! I've kind of had to jump in to this project with 2 feet and learning as I go but good to know the fundamentals especially in regards to external SVGs and calling from CSS etc. I'll put the SVGs inline and go from there. I'll run through the tutorials more too and implement as you've suggested. Thanks again.

Hi guys, sorry, very new to this but just wondering if it's possible to animate SVG elements loaded as a background image through CSS and how I would target the elements...? I have a couple of very small CSS animated SVGs at present but need them to trigger in a timeline one after another before loading a lottie/bodymovin animation which would then cycle through. Not sure how I would put it into codepen but you can hopefully see an example here: http://containerizer.com/payadvantage/bpay/ If you go down to the How BPAY Works section you'll see it kind of working but the timing isn't quite right... the Process animation on the right is the Lottie/Bodymovin part. Again, apologies, I'm very new to Greensock but loving it so far if I can just get my head around some more of the complex parts. I'm more of a video/animation guy currently, hence the bodymovin elements... ? Any help or pointers very much appreciated.