barthendrix
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by barthendrix
-
-
Hi @mvaneijgen
Here's a codepen which shows the original issue -
See the Pen MWqgyzM by barthendrix (@barthendrix) on CodePen
If you uncomment the commented css lines (which handle the transition of the pie wedges on hover) and put a return at the top of the js file, the css animation is smooth. When you use the js only approach, the pink wedge has a flicker when it's animating. It seems like it's the combination of animating stroke-dashoffset and stroke-dasharray that's causing the flicker.
Hope I got that right @Devotee007 - and the animation is starting to look pretty cool!
-
1
-
-
Nice! That definitely solves it. You're right though, the combination of animating stroke-dashoffset and stroke-dasharray seemed a little jumpy in the original codepen.
-
Sorry, you're right, the animation of the pink section does looks a little shaky. I though you meant staggering as in the pink section starts animating later.
No ideas myself, the code looks right. I hope someone else can help!
-
1
-
-
Hi,
I don't see any staggering in the codepen. Looks like the javascript code is achieving the same effect as the css code?
And this is probably unrelated, but it should be duration, not dutation 🙂
-
Hi @codelab,
Not sure I understand exactly what the effect is that you want to achieve, but it sounds like you've identified the issue - something to do with styling rules in tailwindCss. It's probably a matter of finding the lines of styling that are causing the problem and overwriting them in your custom stylesheet.
Having had a quick look at the css, maybe these are worth a try:
- remove the overflow rules for the body tag in the custom stylesheet. Messing with overflow can create weird results, especially when you're combining it with things like scrolltrigger.- remove flex-wrap: wrap; from .container. You want the panels side by side, right?
- change the rule for .panel from width: 100vw to flex: 0 0 100vw
Hope that helps!-
3
-
-
18 hours ago, GreenSock said:
Better?
Yup, it's all silky smooth again. Thanks again @GreenSock and @Cassie, that was really quick!
Looking forward to the next release.
-
1
-
-
15 minutes ago, Cassie said:
Thanks for flagging this!
Sure, thanks for the quick reply!
-
2
-
-
Hi team greensock,
First off, thank you for building such an amazing animation library! Having only discoved greensock recently I can honestly say I haven't had this much fun making things for the web since the days of yore when flash ruled supreme.
I think I might have come across a weird edge case in which nested scrollTrigger animations don't seem to be initializing properly, please see the codepen. It's a relatively straightforward setup with a pinned container. Inside the container is a horizontally moving list in which each of the items has it's own animation. The items are positioned to look more or less random, and the scrubbed item animation moves them back to their initial state.
Before the container animation hits the start point for the first time, the nested items are positioned as if they themselves are off screen, rather than the position they should actually be in according to the scrubbed timeline. Once the start point of the container has been hit, they jump into place. From there on everything is fine.
Perhaps I am doing something wrong myself, although there does also seem to be a difference between different gsap versions. If you change the version in the codepen to 3.11.1 or lower, the items are positioned correctly the first time. Gsap 3.11.2 or higher, and they're not.
Any ideas what might be going on? And what could be done to fix the initial position?
Thanks!
Bart
See the Pen abjeyax by barthendrix (@barthendrix) on CodePen
Animating stroke-dashoffset works fine in CSS animation - stagger with GSAP?
in GSAP
Posted
Yup, that looks perfectly smooth.
Interesting to learn about autoRound, thanks for pointing that out!