nico fonseca

Hey! @orion_prime the mousewheel event doesn't work on touch devices, so you need scroll or touch events.

@PointC hahaha, I'll be careful ? but this is getting addictive. ? @GreenSock thanks ?, I'll stick around to give back everything Greensock gave me these years ?

Hi @Neg you have a syntax error in "line 86", try: window.addEventListener("load", function(event) { init(); });

That's nice @Cassie and i didn't know the svgOrigin property. Thanks to all of you for letting me contribute. ? I learned a lot of things on these weeks. ?

Thanks @GreenSock and @OSUblake for your explanation. ? I will consider those things.

Hey folks! I'm having a problem with SVG transform properties using transform-box: fill-box Is possible to avoid the matrix calculation in the rect ? I created a Codepen example with three rects, the red use only css, the blue use a normal tween and the yellow one is crazy ? Thanks! ?

Hi @BrianT The problem is that Vue only accesses the ref properties after the element is rendered. Hope this can help you https://codesandbox.io/s/musing-hodgkin-xww5z?file=/src/views/Home.vue Cheers. Nico.

@OSUblake that is awesome ! ?

Hi @Leemoon. @Cassie is right! Btw, I created a simple demo to try to resolve your issue. https://codepen.io/nicofonseca/pen/0ec223512264e19bf2730569eef0df80 Cheers, Nico.

Hi @Just_Jack You can use an ease property like ease:"power2.in" or create a custom ease with CustomEase plugin. Check the Ease Visualizer to check all easing ? I create a Codepen demo for you: https://codepen.io/nicofonseca/pen/bd87ebd97a51102c15461ee9f2ca01a4 Cheers. Nico

@OSUblake you were faster lol

Hi @Overthane Here you have an example of what you want to do: https://codepen.io/nicofonseca/pen/ae4d38d4fb3db8526a15111df7cea562 In order to improve animations with CSS variables, I recommend you to use the variables inside the scope of the element you want to animate and not global variables, because they can bring some performance issues. Also, on the CSS you can use calc(var(my-variable) * 1px) or calc(var(my-variable) * 1deg) or whatever you want to animate. Lastly, if possible it is better to animate transform (rotate, scale, y, x) properties instead or width/height. Hope this helps! Cheers, Nico.

Hi @ScotchRoo, You can see on the installation page if any method works for what you need. If you can't find the solution let me know. https://greensock.com/docs/v3/Installation And if you use gsap v3 you don't use this const timeL1 = new TimelineLite(); use: const timeL1 = gsap.timeline();

Set position param as 0 on the last tween, and you can check the full tutorial in the @OSUblake comment ? tl.to(flipper.querySelector(".top-image"), {yPercent: -100}) .to(flipper.querySelector(".bottom-image"), {yPercent: 100},0);

Hi Scott, I recommend using encapsulated code for each image you have, so you can treat each element individually (like a component) I have created a demo so you can see it. I hope this helps. Cheers, Nico https://codepen.io/nicofonseca/pen/56309eaf73897ed36842da7cd99ee922?editors=1111