Leaderboard

Indeed... the blunder has been corrected master!!!

Hi @digableinc Welcome to the forum and thanks for joining Club GreenSock. I'm a fellow AE user too. Masking an image is no problem. The easiest way would be to add the image to your SVG (so it scales nicely) and then create a mask for it. Mask color is important. White will show everything. Black will hide everything. You can use gradients in masks too. Here's a fork of your pen: We had another question recently about showing a full screen background image and this was my mask solution for that thread: Here's a good resource for some additional learning about masks and clip-paths. https://css-tricks.com/masking-vs-clipping-use/ Hopefully that helps. Happy tweening and welcome aboard.

Wow! You guys are really genius! I really want to like you one day! Thanks for helping me out! I also achieved the same and I will share you my working codepen with you too!

Sorry about any confusion there - I can make ScrollToPlugin accommodate relative values like that in the next release. In the mean time, feel free to use @Rodrigo's suggestion (though I think he meant "scrollLeft" rather than "scrollTop")

Hi, Actually this has nothing to do with React (how about that React is not the culprit, who would have suspected?? ) but with the fact that the ScrollTo Plugin doesn't work with relative values like a regular tween using the CSS Plugin, that's why the first code you posted doesn't work (it actually doesn't work with or without React) and the second snippet does. What you can do is access the scrollLeft property of the target element and add the increment value to that: TweenMax.to(content, 0.5, { scrollTo: { x: (content.scrollLeft + incrementNumber) } }); That should do the trick. Let us know how that works. Happy Tweening!!!

Harsh! I may have been sloppy. Fine. But I am sleep deprived. It wasn't me who tried to reach for an element before it was in the DOM. ?

There are many approaches you could take with this. Here's what I'd personally do because it'll probably deliver maximum performance and it's relatively straightforward (once you get the concept): I'm using a single timeline that basically animates things from left to right and then mapping that animations progress() value to the draggable position. So when it's in the center, progress() would be 0.5. When it's all the way to the left, progress() would be 0. All the way to the right, it'd be 1. That way, you're not constantly having to set() values or track the mouse or whatever. Nice and zippy. I gave you a "range" variable so you can control how far from the center the card can be pulled before things are fully rotated/scaled. Have fun!

Who copied who?

Pointing out the error in a minified file does not help. Try using a regular file and expanding the error. Human readable code! https://unpkg.com/gsap@2.0.2/umd/TweenMax.js GSAP can't do it's hack to set the transform origin because the leaf isn't in the DOM. // BAD function createLeaf(container) { let leaf = document.createElementNS('http://www.w3.org/2000/svg', 'path'); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); container.appendChild(leaf); return leaf; } // GOOD function createLeaf(container) { let leaf = document.createElementNS('http://www.w3.org/2000/svg', 'path'); container.appendChild(leaf); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); return leaf; }

Wow that is exactly what I was looking to do! Your note about being able to use gradients in masks is interesting. Applying a gradient to the path would allow for a softer path reveal instead of a hard edge. Going to have to look into that. Thanks for the quick response!

I'm not sure what you mean by scroll, but I assume it's a 'type from the center' animation? You can do that with SplitText. Maybe something like this. Happy typing.

Here's a fixed/forked version: I noticed several problems with your CSS: You need to set overflow-y:scroll or overflow:scroll so that it's actually scrollable. You have the height of that containing element as 700px, but only 5vh is actually visible. You can't scroll beyond the end of the content, so the hundreds of px that's off-screen will prevent the content from ever reaching the visible area. I set the height to 5vh just so you can see what's going on. Also note that you can scroll to an element selector if you'd like (that way, you don't have to guess at a specific number). And if you're loading TweenMax, there's no need to load TimelineMax separately (because it's inside TweenMax already). Does that help?

Did you look at the links he posted? There's a bunch of different demos to learn from.

Good catch! That's just because the SVG element wasn't added to the DOM before there were transform-related values set, so it's just a matter of flip-flopping these lines: //OLD: TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); container.appendChild(leaf); //NEW: container.appendChild(leaf); TweenMax.set(leaf, {attr:{"d": leafPath}, transformOrigin: "left center"}); Firefox throws errors when you try to grab certain values on an SVG element that's not visible or in the DOM (like getBBox()).

Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work. It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin, Few things to note, 1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes. 2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg. 3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join. 4. SVG overflow is set to visible so stroke won't get partially hidden.

Yep, it does. It hurts until one day, it doesn't. I was struggling with arrow functions myself for a long while. Now I get them. So, now I am struggling with async/await. There's no end to the pain. Let us play this golf with a sandwedge, as we go along we'll pick bits and bobs, make a club. Before you realise it, you'll be swinging for birdies.

Oh my turn! my turn!! PS: Sorry couldn't resist