PointC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by PointC
-
Sure, you can do all that with GSAP. I think this thread could help you. Happy tweening.
-
Yeah, I'd need to see a demo to offer any help. Just FYI - SVG clip-paths or masks work well for the invert effect, but you can also use CSS variables without a duplicate element like this demo. Just another option. https://codepen.io/PointC/pen/ZErvbPR
-
Please give this a whirl: gsap.to( {}, { duration: 0.5, onUpdate: function () { console.log(this.progress()); } } ); Happy tweening.
-
Stops by again and whispers *be lazy. use the MotionPath plugin*. Get your work done quickly and go for pizza. ?. YMMV.
-
Wow - is that @Shaun Gorneau dropping by with knowledge? Probably needed to dust off the old GS Mod Badge.
-
A couple similar demos from my archive that may be helpful. https://codepen.io/PointC/pen/ExVzqdm https://codepen.io/PointC/pen/pojmBKJ Happy tweening.
-
Hi @tilohi8071 Welcome to the forum. If I understand your desired outcome correctly, I'd tap into random and repeatRefresh like this: https://codepen.io/PointC/pen/JjmdvgQ/eeadbc4fec40ac5924627de100a06d19 Hopefully that helps and welcome aboard.
-
Your filter is applied to a parent div → .header-wrap2, but you're animating it to a blur of 0 on the child div with an ID of cattle. Target the parent and use px after the zero and you should be good to go. .to(".header-wrap2", {'filter': 'blur(0px)', duration: 1}); Happy tweening.
-
Switch your buttons to inline-grid and make sure you're selecting the actual span and you'll be good to go. https://codepen.io/PointC/pen/eYPOabg/e1b1174eaaf3a0f188ea8896a7c19127 Happy tweening.
-
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.
