Mattrudd

@mvaneijgen No need to apologise dude! Really appreciate your efforts. It could be a great shout to rebuild the animation solely in GSAP. That would still require a nested pin I think, but potentially a lot easier than dealing with Lottie. Thanks for the tip on animating yPercent instead of top!

Hmm I'm not sure why the Lottie isn't showing - in inspector the SVG of the element seems to be positioned correctly (top of the phone screen) but it's not appearing as I'd expect. Ideally I'd like the lower images to 'push' the Lottie 'up and out' so to speak, rather than have it fade out, if I understand you correctly there. I moved your playhead addition to before the slides tween... and it seems to show the right sequence of pinning, just with a blank space rather than the animation appearing. Albeit with a very long delay before the white Lottie section is pushed up. https://codepen.io/matt-rudd/pen/oNPZgVm

Hey, thanks for your reply. I did think of including it in the timeline, but figured the need to pin the Lottie first would mess with the flow. I've been guilty of missing simple solutions while looking for complex ones before ? The Lottie element is tucked in here: <div class="phone-mockup-slide phone-mockup-slide-1"> <div class="top-logo" id="lottie"> <div class="LottieSection"> <div class="Lottie-block"> <div id="title"></div> </div> </div> </div> </div> Your pen doesn't show the animation working for me, but you've given me food for thought, thanks.

Hi all, I'm a little stuck trying to get a Lottie animation to pin and play before a sequence of images. What complicates all this is that the Lottie animation and the images that follow share the same pinned container. I'm looking to get the following sequence working: pin the phone container, scrub through the Lottie animation (pinned in place) Lottie animation unpins on finish and moves up and out Images follow directly on, scrolling up into view within pinned phone container Phone unpins and scrolls out of view at end of image sequence Hope that makes sense! (You'll see in the pen that I've commented out the Lottie section... so only 4 and 5 of the sequence are showing). Scoured the forum and beyond to try and get my head around this 'pin within a pin' challenge, but have come up short. Tried setting pinType to transform etc... and saw that pinnedContainer doesn't support nested pinning. Appreciate it's best to avoid nested pins... maybe there's a better way to achieve the sequence I'm after? Thanks as ever.

Hugely grateful as ever @akapowl! Thanks loads. Feel like I've come pretty far with GSAP, thanks to this forum, but it's still sometimes the really simple things that trip me up!

Hi folks, Happy New year to you (only 4 days over the limit ?) I'd like to animate a Blotter.js effect using ScrollTrigger instead of the way it's currently set up in my pen to animate onmousemove. The gap in my knowledge is how to make Scrolltrigger multiply the two values (material.uniforms.uOffset.value and material.uniforms.uRotation.value) I understand how to call a standard function using Scrolltrigger, but here I'm wanting to affect a specific value as the page scrolls (rather than as the mouse moves). There's a Codrops article here that details hooking up Blotter.js to scroll but figured this wouldn't work in conjunction with ScrollTrigger/Scrollsmoother. Have a feeling it may involve something like an onUpdate function ? but I'm likely way off there. Fully fully appreciate you couldn't possible support another library but hoping to sneak this within the GS remit - as a wider question about affecting values in the way I describe with ScrollTrigger. ?

Great tip, thanks @Rodrigo ?

Hi @GreenSock, haven't yet had chance to make sure everything's up to date - I know I'm using the unpkg.co distribution for the latest GSAP main, but will check ST and SS etc. A further quirk is while trying to diagnose any of my own errors by rebuilding the site in a Codepen, it ran on Safari flawlessly... so wondering whether it's an issue with the Live Server plugin I'm using in VS Code. If only all code was as good as GSAP! Anyway - thanks again for the nudge about the refresh placement.

Thanks @GreenSock - I tried calling refresh in an onComplete as you suggested - it does enable scroll but on my production site I'm getting the same scroll position jump and weird loss of content above the showreel block... as if Safari has decided to set a new page top limit after refresh. Annoying is the word - didn't for a second think it was anything other than a Safari bug! May just have to embed the video in the page for Safari.

Hi, On my production site I'm using ScrollSmoother and a range of ScrollTriggers. All is well in Chrome, but in Safari, when the Lightbox playing a showreel is opened and then closed, the page stops scrolling. The Lightbox has to sit outside the smooth-content container as it needs to be fixed, but that seems to mess with Safari's rendering. (Click blue box to open Lightbox, then click again to close - the production site has 'play' and 'exit' cursors!) I added a ScrollTrigger.refresh(); on line 132 of the pen, and that fixes the issue in this demo, but on my production site when I add the same 'fix' the page does scroll again but at the expense of cutting out the page content above the the Lightbox section. I obviously can't share all my page code to showcase this issue - so imagine Spacer 1 and 2 not appearing in the demo after the Lightbox exit, with the new top-of-page being the video block. Any pointers for troubleshooting this? I've tried manually calling refresh after each ScrollTrigger instance. Maybe worth noting that everything functions fine in Safari when ScrollSmoother is removed - so thinking I'm likely doing something wrong in the initial ScrollSmoother setup (which is the same as in this demo). As ever, any pointers from you brilliant folk will be gratefully received!

@Cassie THANK YOUUUUUUUUU! Absolute ⭐ Oh my days player.seek()! How did I miss that in the docs! Very grateful and will learn a lot from chewing over your solution ?

Here's my effort so far... I def need to go over all the docs a few more times! (No surprise that the only reason I'm learning JS is to use GSAP more fully!) https://codepen.io/matt-rudd/pen/abGGRjQ I’m looking to have each Lottie in the gallery flip from thumbnail (originalContainer) to centre stage in the middle of the grid (newContainer), then play through. Worked on this effort over the weekend, and made some progress! I took a good look at your example above @Cassie, as well as your wheel style one, but figured the gallery example at the top of this thread is the closest to what I’m after - reparenting in a larger empty container rather than swapping existing image placements? There are a few things wrong with my attempt - the main issue related to Flip is how best to make the Flip work for each thumbnail, not just one! Tried to get an array of each thumbnail so that clicking on each would flip to the new container, but my JS is still sketchy as! I’m only getting close with the first (top left) thumbnail. Looking into nodes as I type! The rest is just incase anyone's feeling generous and has any insight ? The area the newContainer takes in the middle isn’t clickable. I guess I could turn this off with ‘pointer-events: none’ but that would likely mean the open div couldn’t be clicked to close? I’d quite like the blue border on all four sides of the thumbnail (added during the flip) to stick while the image is in the newContainer. Tried a few methods including onComplete to toggle this border class but didn’t crack it Not sure how to fix opacity so that the unselected thumbnails dim while the selected thumbnail is active, then un-dim once thumbnail returns to original position. This last issue is a biggy - literally scoured the internet to try and find a play/reset method that would allow for the Lottie to only play once it’s taken place centre stage in the new container after the initial Flip click, then reset to the beginning ready for a potential second click. The closest solution I could find is the inline ‘onClick=function’ method, but this limits things so that the animation only plays on the first click… and I haven’t yet managed to build in a delay so each Lottie would play after the flip and not before. In my head this would involve calling a play function in the flip.from timeline? I could add the delay there too I guess. There are few if any working examples I can find of a gallery page featuring lots of Lotties! One for their forum though, I understand!

Hey @Rodrigo - thanks for your reply man. Yes - I see the reparenting going on - I chose this example because it behaves the way I want my Lottie gallery to behave... unless I'm incorrect I figured I couldn't somehow use a Lottie json link as a data source in the same way this example uses the img tag? If this was possible it would be a pretty straightforward swap I guess - but that's likely a sign I need to go back over JS arrays and try and incorporate. You're right of course about Lottie files being SVGs... the pixellation was a case of Safari striking again! It must've rasterised the image and thrown me... seems fine in Chrome. Because of this Safari paint I figured that Flip was scaling just the container without respecting the SVG... I should have much more faith in GSAP ha! The pen below is very rough and ready - I'm still pretty noob and only part way through (haven't yet centred/overlaid the new container over the thumbnails with Flip.fit etc.) This pen should give you an idea of what I've got in mind though. https://codepen.io/matt-rudd/pen/dyemRzv All that said I'll pause and get my head around @Cassie's how-to - got a feeling at a glance that it's a much better way... I'll be sure to check that after some sleep ? Thanks for pointing me towards it ?

Realised I neglected to say thanks sooner @Rodrigo!

Hi, My latest aim is to build a Flip gallery (very similar to the walkthrough example https://codepen.io/GreenSock/pen/JjXqMZK) Key complication is I need it to showcase a bunch of animated Lottie files. Figured it best to start at the beginning with Flip and test how I might trigger the Lottie to play once it's nestled into the new container (FLIPpin' clever btw ?) That led me to my question... still got my training wheels on so bear with me here... Is it possible to ask Flip to scale the SVG vector (think I'm correct in stating this would be scaling the SVG attributes rather than transforms?) in such a way as to avoid the pixellation you can see in my (very rough) demo I could likely just make the original Lottie file a higher resolution, but figured there may be a cleverer way - if nothing else to keep file sizes down. Thanks as ever.

Hi wearers of the green foot cover... I've hit the extent of my less than considerable GSAP knowledge once again - trying to migrate a pice of code I've stolen from TweenMax to GSAP 3. The issue is in the staggerTo section - I've read through the migration docs and tried to find similar examples but not been able to work it out. Tried replacing the two 'tl2.staggerTo's with just 'tl2.to' as instructed, but then I get an error with the last two lines of the timeline, which are already 'tl2.to'. Thinking it needs reformatting to work as intended but not sure how? Incidentally - what's strange is the sequence works fine on Codepen, despite the deprecated code, but not locally via VS Code (which throws up deprecated errors) //// MIGRATION ISSUE! //// let tl2 = gsap.timeline({paused: true}); tl2.staggerTo("line", 0.4, {drawSVG:true, ease:Power2.easeIn}, 0.25, "lineStart"); tl2.staggerTo("line", 0.4, {drawSVG:"100% 100%", ease:Power2.easeOut}, 0.25, "lineStart+=0.25"); tl2.to("#slide1", 1, {x:-13, y:9, ease:Circ.easeOut}, "lineStart+=0.25"); tl2.to("#slide2", 1, {x:11, y:6.5, ease:Circ.easeOut}, "lineStart+=0.5"); ScrollTrigger.create({ trigger: ".text-container", start:document.documentElement.clientHeight * 1.6, toggleActions:"play none none reverse", animation:tl2, }) Thanks as ever!

@Rodrigo you are the man. Thank you! That start value is exactly the kind of thing I was thinking was possible - just formulating it was beyond my reach. I'll go away and learn about that now. Thanks again!

Hey @Rodrigo! Thanks for your response. Sorry if I wasn't too clear... it's not the panels I want to adjust - really happy with how those work. It's that I want Craig's slice animation (isolated in this pen here) to begin when the last panel displays and not before or after. https://codepen.io/matt-rudd/pen/yLjBaEo This way the user won't 'miss' the tween if it plays while 'beneath' the first two panels. Here's the sequence as I see it: -Page load - panel one 'cut' shows -User begins scrolling - panel two 'through' displays, -User continues scrolling - panel three 'noise' displays and the slice animation is triggered (it's just this triggered animation I can't do!) -User continues to scroll - panel section scrolls up to reveal the white div and black text once the slice animation has completed Everything else (as in, the way the panels switch the three white-on-black words and then scroll up to reveal the fade-in black-on-white text) is great as it is. So the changes you made above aren't needed. The way I see it, the animation should be triggered at a specific point along the panel Scrolltrigger - the point that the last word 'noise' comes into view. It's this triggering/sequencing logic that I've been unable to get right. It's likely just a simple bit of tweaking to incorporate this animation into the first Scrolltrigger... but my sleep-deprived brain can't fathom it ? I've still a lot to learn but getting there. Hope that's a bit clearer?

Hi folks. I'd like an animation to run in the final pinned panel of this header, before the third and final panel scrolls up to reveal the paragraph of text. I've tried adding a second timeline and attaching to a Scrolltrigger, but of course, due to the nature of the panels, the third panel 'appears' rather than scroll into view, so setting start/end trigger points doesn't work. Wondering if there's some GSAP-based logic to trigger this 'slice' animation (thanks @PointC! ?) when the last panel of the three-panel sequence is in place, and not before? Hope my description makes sense. Next on the list is matching the svg text ('noise') with the responsive font size and centred positioning of the proceeding 'cut' and 'through' text - but that's one for Stack Overflow I feel ?

I though as much - thanks @GreenSock - it was a function that wasn't necessary. Thanks for the nudge to break it down and build it back up - that did the trick!

Experiencing a strange repeat instance of a Lottie animation in my project... The top disco ball on black is the expected instance, and the one showing in the next div down (purple) isn't wanted/ I've been sure to retain the ScrollTrigger.refresh in the helper function Fully appreciate that a demo is likely required to showcase the issue, but as I'm not sure which bits of code are conflicting it's a tough one for me to strip down into a simple pen! The way I'm setting up the lottie/scrolltrigger animation works on its own without any repeating, but when I add it in with a bunch of other GSAP animations (as well as ScrollSmoother and barba.js) the second view of it in the next div appears. Long shot with what I'm able to provide here but figured one of you experts might know of a common cause? It's bound to be some of my dodgy code clashing with the Lottie helper function. I've been sure to keep the ScrollTrigger.refresh in there, but not sure what could be causing this? I'd fade it out with an onComplete after the full Lottie has scrubbed through, but that's not a good fit for the page. (PS - just a sample animation... wish I was really adding a giant disco ball... ?)

@Cassie oh my. I really AM having one of those days ? Thanks for stepping in again! Now where's that 'delete post' button...

Hi again... I'm looking to add a Lottie ScrollTrigger animation on a page with ScrollSmoother. It's been a breeze to replace Locomotive Scroll so far, literally just snip out the scroller proxy and setup the ScrollSmoother at the beginning. It seems I've skipped a beat here with this Lottie section though... with ScrollSmoother active, the Lottie animation runs and pins but doesn't scroll up to reveal the bottom spacer div. Have checked the Lottie helper function and searched the forum for any Lottie/ScrollSmoother examples and come up blank so far. Have commented out the ScrollSmoother in the pen demo attached and it works as expected. Any pointers to highlight what I've overlooked here would be as ever, very gratefully received! ?

Perfectly ?

I don’t think daddy daycare and coding mix haha. Thanks for bearing with my sketchiness! ?