peacepostman
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by peacepostman
-
-
Hello !
I've found the linked codepen created by @OSUblake and I was wondering if it is possible to animate the width or the flex-basis according to the items display.
The desired effect would be flex-basis 25% when displayed in row and flex-basis 100% when displayed in column.
I've tried to accomplish this via css but the items very badly animate due to the flex-direction change.
Best regards,
-
Hello, thanks for the link, the codepen is updated, i've had totally missed the fromTo function from the library, i'm having a try with this one.
Thanks !
-
Hello !
I am trying to optimize a small plugin I've made for our website but i think i'm stuck and i was asking myself that maybe someone here have an idea to optimize things a bit.
I really think that the main problem is animating the left property, it's always a bad pratice in css, but i didn't success in setting an initial x value for each particules (Shame !)
Maybe the SVG effect is not helping the GPU performance also.
Best regards !
PS: CustomEase is in the codepen, i'm deeply sorry to include it but you dont provide any CDN, i can edit and remove it immediately but the codepen wont work anymore.
See the Pen GGeZwO by peacepostman (@peacepostman) on CodePen
-
Wow thats pretty cool
i created my own custom transition using the builder in the doc, but I keep your information in mind, thanks !
-
1
-
-
Nevermind i was confused and find happiness in custom easing (https://greensock.com/docs/Easing).
Topic close
-
2
-
-
Hello !
I'm trying to convert a css animation to a tweenMax one, I really need to convert the following cubicBezier value to tweenMax Bezier plugin but i'm far from the desired output
cubic-bezier(.87,.01,.8,1.04)
If any convertor hero is in da place I will be really glad !
Thanks,
-
@grahamd Hello and thanks for your feedback
To reproduce your desired effect you have in my opinion two solutions.
First the easy one : rotate .wave in my codepen with the following css rule
.wave { transform: rotate(-90deg); }
Second one, the tricky but proper one, alter the javascript in order to affect the wave on the X axis and not on the Y axis. If you make this changes on the javascript sides, please submit me a PR on github (https://github.com/peacepostman/wavify)
Good luck !
-
1
-
-
Hi @OSUblake,
Wow that's an epic codepen you bring here
I like it, i miss the chaotic random wave effect but the smoothness is real !
Didn't know about paperJS, i found a codepen which was probably copy from this lib too, ahh internet
Anyway, thanks for your reply, i will try to build something smoother upon it.
-
1
-
-
I'm glad this pen could spread joy around the world
I've updated the pen to implement a native debounce function, it is way better when resizing, thanks @Jonathan
Nevertheless i'm more than interested of finding a way to optimize the animation. Im encountering bad slow down on mac using Firefox or Safari. Chrome is doing just fine but together we are better so if someone has an idea, please share
-
1
-
-
Thanks for your feedback, i've edited the codepen in order to apply your suggestion. My main concern was around the draw() function, i was asking myself if there was a way to avoid calling requestAnimationFrame(draw) and do it with a pure tweenMax alternative.
Thanks again for your feedback
-
Hello,
I've adapted an existant codepen to a jquery plugin in order to animate a svg into a random wave effect. I managed to use tweenMax in order to smooth the animation but i dont know if i've done that properly or if something can be improved or re-writed in a more clever way.
Feel free to copy the jquery plugin if you need it
Best regards,
See the Pen jBavvN by peacepostman (@peacepostman) on CodePen
-
6
-
Question about flex animation
in GSAP
Posted
Thanks !
I've successfully achieve it
For those struggling to, here is the codepen demo :
See the Pen RmYgoL by peacepostman (@peacepostman) on CodePen
Best regards,