kabocreative

Thank you mvaneijgen!!! Perfect solution

Hi! I've got a repeating animation working beautifully, but I only want it to play when inside the ScrollTrigger boundaries. Currently it doesn't start until it enters the ScrollTrigger start boundary, but then it all goes wrong and doesn't stop when scrolling out of the boundary. I'm pretty sure the issue lies somewhere in the fact the animation is set to repeat, but I've no idea how to resolve that. As always any help is veeeeeery much appreciated

Oh no, it was a typo! This is now my second GSAP forum post with a camelcase mistake, eek. Thanks so much @mvaneijgen for figuring it out and explaining your debugging process. Doh! And also thanks @Cassie - your example is certainly much cleaner and easier to read than mine, meaning I could come back to it and make sense of it more easily in future. Good to hear from the pro's not to worry too much about it. I've chosen not to use the global defaults for scroll trigger as I do have other scroll trigger timelines on the page that should have different behaviour. Final working article now being put into website. Thanks again to you both!

Hello GSAP-ers! I've got a series of icons, each with their own timeline. I'd like them to only animate when in view, so I'm using scrolltrigger to play onEnter and onEnterBack as per: toggleActions: "play pause play pause" I would expect them to be paused unless in view, but t2 and t5 are always playing. I wondered if this might be related to having scrolltrigger and defaults applied to the timline, but when I remove the defaults they still animate before coming into view. Primary question: Any ideas on how to prevent t2 and t5 from playing when not in view greatly appreciated. Secondary question: repetitive code As a secondary point I'm running the same scrolltrigger on 7 timelines, which feels excessively repetitive: scrollTrigger: { trigger: "#div-id", toggleActions: "play pause play pause" } I think I want a forEach loop here, but every example I come across is for running the same animation repeated times, while each timeline here contains unique animations. instead of '#div-id' which is unique for each timeline, '.section' could be used as each item is in a .section div. Any ideas to tidy up my excessive code here greatly appreciated as I'm certain it is too lengthy!

Thanks so much Carl! That article is amazing and now bookmarked. SVG Origin is what I wanted but failed to find, thank you. Yep my quickly put together SVG is not centered in the viewbox. Fixed and working here: https://codepen.io/kabocreative/pen/rNvpZMY Thanks for showing how to work with awkward alternatives though in the second example, also super useful!

Hi again! I've hit a problem with rotating an SVG path. In the codepen I have two paths. I'm rotating the path with the class 'i-should-be-moving'. If you inspect it you'll see it is rotating, but around its own center, not the center of the viewbox as I'd expected when I set the transform origin: t4.to("#icon-4 .i-should-be-moving", { duration: 2, rotate: 360, transformOrigin: "center center", repeat: -1 }) I stumbled across this thread which seems to acknowledge (if I've understood correctly) that GSAP rotates around 'self coordinates' while CSS rotates around 'viewbox coordinates': I couldn't see in that thread if there's an override however. How best can I make path 'i-should-be-moving' rotate around viewbox 'center center'? Thanks!

Thanks Cassie I've historically been a podcast listener.. but this looks so useful I'll find time to watch it!

It was a bit! I thought I'd have a look around for any good podcasts now I plan on getting into GSAP, and came across Egghead dev chats from 2018! Old, but still good

Thanks Jack. Good lesson to learn now! Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!

Oooh that's working for me, hurrah. Thanks Carl!

Asked a friend. It's working on windows. Just me. Will do some googling On the plus side, at least it works!

Ooh how strange. You are seeing what I used to see. When you responded with a polite 'eh.... it's doing what you want....' I took a look on my wife's machine (mac) and ta-da it is indeed doing what I want! On her iPhone and Mac (multiple browsers) it's working. On my windows (chrome + firefox) and android (chrome) the path is rotating and not the text as per this loom: https://www.loom.com/share/c33f2d1718c24875ae55e04d69190e89 I'm now assuming it must be me, but would LOVE it if you happen to be android or windows and can confirm? Now to figuring out what on earth I've done to my setup ?

Hi all, So I created a nice simple animated jump link with text rotating on an SVG path. Got it up on the site and moved on. It has stopped working, both on the site and the original codepen. Inspecting I can see now instead of the TextPath rotating, the path itself is. Any ideas greatly appreciated

Ah that does help, a lot! Bookmarked for future reference thank you!!!!

Just had to be pulled out - I love how simple you make it sound! Thanks so much Cassie, I can follow what you've done but I'm certain I'd never have gotten there on my own. At least not yet.

Yep - thanks for the video. I watched that today, match media looks ace and I've happily been going through a few animations using scrolltrigger matchmedia and updating to the newer match media, perfect. I'm stuck where you've mentioned.. it's the event listeners! I've no idea what to do with that. Perhaps it's not something match media should be covering and I'm trying to make it do something it shouldn't be?

I've also updated this pen to not contain two sets of matchmedia! Everything works as it should, it just doesn't stop animating below 800px: https://codepen.io/kabocreative/pen/jOzjjyO

Oh! So I do, quickly edited one to show you and failed to notice I'd been working in it already sorry. Completely clean without any matchmedia: https://codepen.io/kabocreative/pen/QWmzLYO

Thanks Cassie, I tried that, but it's breaking the event listener for mouseenter: https://codepen.io/kabocreative/pen/jOzjjyO That's the bit I can't figure out how to resolve with match media.

Hey! Yep on tablet and below these circles will be hidden entirely - so not visible at all. Therefore I don't want them animating either. So yes - all animation on large screens, no animation on small screens exactly as you've said.

Hi all! I need to hide a section entirely on narrower screen widths, including killing the animation to avoid wasted resources on something you can't see. I've stumbled across the lovely new match media, which looks just the thing. I've successfully applied it on a simplified version of my animation by surrounding the entire timeline in a min-width match media: [codepen not displaying in place for some reason - see simpler codepen titled GSAP forum: simple timeline matchmedia test which is showing at bottom of this post] https://codepen.io/kabocreative/pen/mdxZgYr My more complex animation this quite working.. Again I've wrapped a timeline (t1) in a min-width match media query and that is working as expected. The animation does not play below 1200px. However I'm getting an error in my event listener for the mousenter hover effect: This I kind of get, as now I guess t1 is only defined for widths above 800px due to match media, but it means the whole mousenter instructions aren't playing even above 800px. https://codepen.io/kabocreative/pen/jOzjRjz I've tried wrapping the whole lot in a matchmedia query, but that results in nothing playing at any screen size. Pointers always appreciated Thanks!

Oh I didn't... I did... I spent an embarassingly long period of time trying to debug that one. Thanks Cassie!

Hi again! I've another 'I'm sure there's an obvious answer but I'm not getting it' problem... I have a simple timeline I'd like to play only when in view. Timeline is hooked up to Scroll Trigger and set to repeat via Scroll Trigger. My problem is it keeps playing when outside of the trigger section: https://codepen.io/kabocreative/pen/GRxeEyZ Help very gratefully received

Big thanks Carl! So simple (if you know what you are looking for!) and makes perfect sense. Thanks also for the direct link to the lesson. I've found the course incredibly helpful! Ran through the SVG modules this week and thoroughly enjoyed having a play! I've got some lovely SVGs working on the staging site now ready for launch. Thanks!!

Hi! I've got a pretty simple challenge that's stumped me.. I've got a series of container divs which include text + image. I want the image to zoom on hover/mousenter, i.e. in CSS: .container:hover img { transform: scale(1.1); } Where I'm finding this tricky is that it is when the container (parent) is hovered that the img (child) should scale. I've worked out utils.toArray and forEach are the things I want to play with, but I've made a bit of a mess that doesn't work whacking one inside the other: gsap.utils.toArray("#portfolio-scene .container").forEach(blurb => { gsap.utils.toArray("#portfolio-scene .container img").forEach(image => { let hover = gsap.to(image, {scale: 1.1, duration: 1.5, paused: true, ease: "power1.inOut"}); blurb.addEventListener("mouseenter", () => hover.play()); blurb.addEventListener("mouseleave", () => hover.reverse()); }) }); I know it's not right, but I'm not sure what is. Currently if you hover on any container all img's scale. I also tried the following which caused the exact same behaviour: gsap.utils.toArray("#portfolio-scene .container").forEach(blurb => { let image = gsap.utils.toArray("#portfolio-scene .container img") let hover = gsap.to(image, {scale: 1.1, duration: 1.5, paused: true, ease: "power1.inOut"}); blurb.addEventListener("mouseenter", () => hover.play()); blurb.addEventListener("mouseleave", () => hover.reverse()); }); Codepen: https://codepen.io/kabocreative/pen/ZExVQVL Massive thanks to anyone who can point out where I'm going wrong