alig01

Hey, you mixed up the order (in v1.0.0). useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container}); // config object offers maximum flexibility useGSAP(() => { if (!article1) return; gsap.to('.mainContainer', { duration: 1, opacity: 1, }); }, { dependencies: [article1], scope: container1 }); How did you notice the package, was it announced somewhere? Hope this helps and good luck with your project.

Hey, I had the same issue a while back. Try to add this css to your pen: .glow-animation { will-change: filter; } source But there are also other tricks which should help to access the GPU acceleration for the particular element. Like: transform: translate3d(0, 0, 0); Just google for it and test which works the best for your case. After the css changes everything looked normal on Safari (on my device). Hope this helps and good luck with your project.

Hey, I played with a similiar effect a while back. codepen I'm not sure if this is the best approach, since it didn't make it into production so I stopped testing it. But it should for sure lead you into the right direction. Some more infos: difference: pageX and clientX, BoundingClientRect The key is to take the scrolling of the page into account. Hope this helps and good luck with your project.

Hey, it's pretty tough as a reader to figure out what's causing the layout shifts (especially if it is not reproducible). My best guess would be that the font loading finished after the ScrollTrigger instance was created. But it could also be caused by another 3rd party library/script, lazy loading of images, components, etc. your own code. So you'll have to dig a little deeper to find out what's causing it. After you find it, call ScrollTrigger.refresh() to recalculate the start and end values (ScrollTrigger Doc.). If my guess is correct, you can read this article, which explains the problem better than I ever could, and provides strategies for solving it. But to summarize a bit: use could use font-display find a system font that is similar to your current one, host the font yourself, (in case you are using nextjs: Font Optimization) etc. If you need more information, search for "layout shifts"/"hosting web fonts"/"etc" and you will find a lot of material to go through. You can also search for it in this forum. I'm sure there are other people who had a similar problem as you. Also, you might want to use a timeline if you are using the same trigger element in your ScrollTriggers. Just make sure that you start the animations in the timeline at the same time (positioning parameters). Advanced Animation Techniques Hope this helps and good luck with your project.

No problem, always happy to help if I can. For this I would probably get rid of the masterTl. You could use the onComplete property to start the second timeline. https://codepen.io/alig01/pen/WNLjJeB?editors=0010 I run the first timeline only once to avoid the scrub effect when scrolling back. If you want to keep that, it wouldn't be easy to reverse/pause the infinite timeline to make everything look fluint, especially if the user scrolls to fast back. Or maybe I'm not aware of something, as revert() would be too abrupt and reverse() only works if the user waits for it. So custom logic would be nesesarry to catch every use case. Maybe a few more circles could be added to the path, but I'm not quite sure what refinements end up being important. Also, for future readers who want to combine/customize svg paths, there is a super useful tutorial by @PointC that explains each step. Hope this helps

Hey, I tried it earlier and this is the outcome. I wasn't completely satisfied (but I couldn't look further), although I think it's close enough? I hope at least I got the direction right ^^ https://codepen.io/alig01/pen/yLGbVoK?editors=0010 Tried it first with normal text outside of the SVG to animate it with stagger, but the spacing between the letters got lost and found a few threads to solve it, but it wouldn't have been worth the effort (for me ). Hope this is what you are looking for and good luck with your project

Hey, just from a quick look, Owl initial css is display: none, when you create your effects, there is no space reserved for your images. That's why it looks like the markers are out of place. So you need to make sure you call ScrollTrigger.refresh(); after the CSS changes from owl (it overrides display: none to display: block) happen. Unfortunately I've never used jQuery so I can't tell you where would be the right place to do that. But putting it inside the ready() method after you initialize your Owl carousel seems to work. You could also check if there are suitable events provided by Owl, something like "afterInit" that you could listen on. Hope this helps and good luck with your project

Hey, I have used both Swiperjs and Splidejs in production and both worked well with gsap for my requirements at the time. Swiperjs you will need to set the virtualTranslate parameter to create custom slide transition and Splidejs has its own transition component which you will need to register. Both have their pros and cons, so you should take a closer look at the documentation to see if they cover everything for your use case. Also, since Swiperjs is more popular, there are more articles/tutorials/workarounds on how to use it, so this should also be taken into considuration. Therefore, I would more tend to recommend Swiperjs. Here's a little example @Carl posted a while back. https://codepen.io/snorkltv/pen/XWBNJjK Hope this helps and good luck with your project

Hey, a few things are a little bit off. Timelines have no markers property, which caused the error message. Also write scrollTrigger with a lowercase, if you are using it inside a timeline and declare it a line earlier. Documentation tl.current = gsap.timeline({ scrollTrigger: { trigger: ref.current, //not sure what would be a good trigger inside a 3D space, since you use OrbitControls that rotate/zoom/... the object in place, if I'm not mistaken. scrub: true, markers: true, } }); tl.current.to(ref.current.position, {y: 5}) Since you are using React, I would highly recommend you to check out the React guides and to use gsap.context() which will help you clean up animations. If other issues occur, please try to correct your codepen so we can take a better look at it. Hope this helps and good luck.

Okay, remember SVGs are not really my area, so you'll have to tell me if it works as intended or not (although my help reaches its limits). Since I don't know if the order inside <defs><mask> is important. Just replace your loop (line 26) with my code above and you'll find that the pen moves again, but the animation order is wrong because the paths don't match. To fix this, I copied the paths inside maskReveal into a code editor and used the Find and Replace function. Here is my search regex: style="fill.*; stroke:none" in case you want to try it yourself. After this step, you will get the paths that you can copy and paste into the <mask></mask> (without the styling) element. codepen But like I said I dont know if the order inside <mask></mask> (since I never had to use them ) is important, but I couldn't see at least a difference. Hope this somehow helps and is a step in the right direction

Hey, Imagine a multi-layered painting. First you paint the background, then comes the apple and after that you add shading and contours (3 layers). In svg it's basically the same, but the first element you paint is the one in the background and the last one is on top of the others. So basically the hand is the background, and the other paths are the shading and contours. If you want your hand to be on top, add it to the end of the svg structure. Hope this helps and good luck with your project By the way, the animation looks amazing, great job! EDIT: Sorry, I was using Chrome where the pen was showing and assumed you meant the pen was behind the drawing (at least a other problem was fixed ). EDIT 2: This got me thinking: and since the pen did not move at all in Firefox, but was movable by transforms I though that the referencing of the paths in the Js was not correct (at least for the hand). So I tried this and it worked (not sure if the pen is always in the right position/path). var maskPaths = document.getElementById("maskReveal").getElementsByTagName("path"); for (let i = 1; i < paths.length; i++) { tl.add("path"+i); tl.to(paths[i], {duration: 0.75, drawSVG:true}, "path"+i); tl.to("#hand", {duration: 0.75, motionPath:{path:maskPaths[i], align:maskPaths[i]} }, "path"+i); } I'm not sure if this is the right approach/direction, but at least it "works" (even if the timing/order of the animation/paths is off) and might provide some information for the next person who wants to help.

Hey, create a parent element so you could use it as a trigger and animate the children like you want. You've followed this approach in this post: You used the parent (section) as the trigger and animated its children (".slide", ".o2lab__col"). Additionally, you could also add overflow: hidden to the parent to improve the effect. Also be aware of fouc (Flash of Unstyled Content). Hope this helps and good luck with your project.

No problem always happy to help if I can. Another option you could try, would be the following: Use gsap.set() to center your x,y values so that the timeline doesn't start in the upper left corner (It's always important to get everything in position before you animate). Once your own scrolling threshold is reached, use xTo() and yTo() to move the clippath to the center. Control only the radius in your timeline, as you already do. This way the animation will be more smooth and feel more natural, at least for me. It is worth mentioning that there is also the .invalidate() method, which clears any initialization data. Edit: Something like this, I replaced the approach of step 2. with the onStart function of the timeline. Since we only control the radius and no --x, --y values, there shouldn't be any conflicts (maybe my assumption is wrong). codepen If you move your mouse and scroll at the same time, than the clip-path grows in place instead of moving towards the center. Hope this helps and good luck with your project

Hey, just my 2 cents. Wouldn't it be better to reveal the image from the position the mouse is currently at? You're letting the user explore the image, and the area they're most interested in would be where their mouse is right now. So why not expand the clip-path from there? This would remove a lot of custom logic and simplify the implementation. And if you still don't like it, at least you would have a good working code base for further changes. Start simple and increase complexity instead of juggling too many things. My approach right now would be to: Fork your current codepen so that your current progress is not lost. Remove anything unnecessary. Keep the mouse movement logic. Create a simple timeline with scrolltrigger that increases the radius. Edit: Also I wouldn't control the same element with two different timelines. Instead just use one. Look in the docs for how to position animations in a timeline. There is also a helpful interactive demo to visualize the parameters https://codepen.io/GreenSock/pen/PopXddg Also you retrieve the wrong properties from getBoundingClientRect() (doc), sectionWidth -> width. My bad, I didn't look closely enough ^^

Hey, Rodrigo refers to the img tag in the CSS and JS. If you want to remove it, then create your new divs with the same unique class name so that you can replace the reference to the img tag with it. Add a shape name to your new divs and copy the styling from this page. <div class="content box"></div> <div class="content circle"></div> <div class="content triangle"></div> After that the first step should be finished. It would be beneficial if you tried it first yourself and only look in the codepen if you encounter any difficulties. Hope this helps and good luck