PointC
-
Posts
5,074 -
Joined
-
Last visited
-
Days Won
411
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by PointC
-
Not sure if it'll help, but here are a couple of my old seamless demos using SVG. https://codepen.io/PointC/pen/wvpObWa https://codepen.io/PointC/pen/eYyKMWK/52ac38788ccdd84fc1eeaa3fcc9afa9e Happy tweening.
-
Name the group and target that instead of the SVG itself. Use insertAdjacentElement() to place it at the beginning or end of the stacking order. Here's a quick fork of my demo from above with that change. https://codepen.io/PointC/pen/abRoZeg/ddabccb18ac315841327a88a7a5c338c?editors=1010
-
I'm not sure I follow. Are you talking about groups? If so, you can append to the group just like appending to the parent SVG. You could also look at insertAdjacentElement() https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement
-
From what you're describing, I think creating one timeline and animating the timeScale would be the way to go. Basic example. https://codepen.io/PointC/pen/ExgExxL Happy tweening.- 9 replies
-
- 3
-
-
- infinite repeat
- timeline
- (and 1 more)
-
Basic append to SVG element. https://codepen.io/PointC/pen/yLebyKv/48362b3142b2341213984f4b560b6c37 Happy tweening.
-
I'd recommend CSS variables to handle animating pseudo elements. Here's a basic example. https://codepen.io/PointC/pen/rNpXXWq Happy tweening.
-
This thread would probably be helpful for you:
-
What are expected deltaX values from a Draggable instance?
PointC replied to foundartfactory's topic in GSAP
ahh... yes. I misunderstood the question. Sorry about that. I think I'd wire it up just like @Rodrigo showed in his answer. Happy dragging. -
What are expected deltaX values from a Draggable instance?
PointC replied to foundartfactory's topic in GSAP
I think you're looking for this in your console log: scScrubDragger.deltaX: ${this.x} Happy dragging. -
I'm kinda late to the party, but - yep I'd go with @Cassie's approach of a thin and thick "mask" element. Otherwise you'd need to break it into pieces like my calligraphy tutorial you mentioned in the original post. https://codepen.io/PointC/pen/xxZejqM/c80d6e828e061b0615a441228616fcbb Happy tweening.
-
I'd probably add a small delay on the "reset" tween and set overwrite to true. Something like this: https://codepen.io/PointC/pen/ZEMjdLj/364a470e414172b8fbd6a7420de056f6 More info about overwrite. Happy tweening.
-
I think that will only work if you assign the arrow function to a variable as removeEventListener requires a reference to the function. https://codepen.io/PointC/pen/RwYJXJY/58144ad0414b9266b9556f00d0b0f91c
-
You'll need to write with an object like this: tl.to(waveAC, { morphSVG: { shape: waveA, type: "rotational", origin: "20% 0%" } }); Happy morphing.
-
Here's one from another forum question a while back. (Can't seem to find the original thread). This one uses a cover to mask the text elements and reveal the letters. That way you don't need a duplicate target element. Just an idea. YMMV. https://codepen.io/PointC/pen/MWQJWqJ
-
Clone and append certainly works. Depending on your needs, insertAdjacentElement() could also work. theSVG.insertAdjacentElement("afterbegin", theAppendedItem); More info: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement Happy tweening.
-
Another little trick is to create everything at 0,0 and then start moving things. That way you know exactly where everything is located. Not always feasible, but works in some cases. YMMV
-
Exact same thing with SVG fill and the attrPlugin. Happy tweening. https://codepen.io/PointC/pen/zYJPOvr/19b1b9a98a4cd015fcdfebb25cb2d513
-
Sounds like you're looking for the position parameter.
-
Congrats @Lamonier - that's great news. 🥳 I believe the current exchange rate for GSAP assisted job hunting is a Club purchase and 100 forum answers. Congrats again. We hope to see you around the forum all the time now.
-
Please try this: onReverseComplete: function() { gsap.set(swatches[i], {clearProps: 'transform'}); },
-
I'm not quite sure what you need, but here are a couple other threads with gradient animations that may spark some ideas. Happy tweening.
-
@Cassie may make a fancier one, but here's a printer friendly version to get you started. gsap-3-cheat-sheet-printer-friendly.pdf Happy tweening.
-
This tutorial may help too. https://www.motiontricks.com/svg-dashed-line-animation/
-
Yep - you need a stroked path for that to work. You can see in my original demo that the path with ID of maskPath has no fill and just a white stroke. Fix that and you should be good to go. Happy tweening.
