I have an animation, which usually is supposed to play 3 times, thus the config currently says repeat: 2. However, under a certain condition (the player stops dragging an element) I want the animation to finish and stop without repeating. By that I mean I don’t want it to stop right at the frame it is a…
Tag: animation
Modifying an existing CodePen Galaxy affect (Zoom out to Zoom In)
so recently I have found this awesome galaxy effect on codepen: https://codepen.io/zeztron/pen/MPNxxR I tried to modify the JavaScript and couldn’t figure out a way to change it so instead of it feeling like Zooming out, making it to feel like Zooming in. Can anyone help? Thank you!! Here are the codes:…
Three.js basics – Can’t find variable – GLTFLoader animation
I’ve got very basic knowledge of JS. Following three.js docs Loading 3D models I have succesfully rendered 3D object and centered it: I would like to animate it now, begining with simple rotation: But the problem is console returns: Answer You have declared model variable inside the functional scope, try to d…
Scroll and let content stick while animating
I’m wondering how to achieve the following scroll animation, Where the STRATEGY and CREATIVE copy dock to the top and then animate while the user scroll, and when the animation is done, the page continue to scroll. Please see page example here: https://www.mrsandmr.com/ What is this called in theory. Th…
Hamburger icon css animation into an x
Im trying to make a hamburger icon turn into an x on click and then revert when clicking again. Ive got the animation set up i think but i need it to trigger on click rather than be constantley set. The ToggleNavLinks function is only used set an elements display to none unrelated to the hamburger icon. Menu …
Make HTML Content Clickable Over Three.js Content
I am making an animation with moving objects in Three.js. In this animation, I create a text bubble when an object is clicked, and it has an “X” button to close it. However, if the x button overlays a 3D Object from Three.js, then the button is ignored entirely and the 3D Object gets clicked inste…
triggered the pseudo elements keyframe animation in jQuery
So I would like to animated this pseudo elements in a button by a jQuery but it is a pseudo element animation that triggered when hover. Here is the DEMO. And this is my code that wants to triggered the pseudo element animation but nothings happen after clicking it. DEMO Answer You where wrong in your css sel…
Animate two items moving away from each other until hitting container outline
For an intro animation, I want to animate two elements away from each other based on the outer container width to make it work responsive. Absolute positioning didn’t worked for me because initialy the two items has to touch each other or have a constant, fixed distance between them. Here is a represent…
Animating multiple circles in a canvas
I’m trying to make an animation inside a canvas: here, a numbered circle must be drawn and move from left to right one single time, disappearing as soon as it reaches the end of animation. For now I managed to animate it in loop, but I need to animate at the same time (or with a set delay) multiple numb…
Inline SVG css animation not working on Safari
I’m using the latest version of these: This is the CSS I am using to achieve the desired CSS animation effects across literally all browsers except Safari. The grow-divider animation works perfectly, and another irrelevant one works perfectly as well on a different page. The only one I cannot get to wor…