GSAP (GreenSock Animation Platform) is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers.
GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers.
Questions tagged [gsap]
1905 questions
145
votes
23 answers
React - animate mount and unmount of a single component
Something this simple should be easily accomplished, yet I'm pulling my hair out over how complicated it is.
All I want to do is animate the mounting & unmounting of a React component, that's it. Here's what I've tried so far and why each solution…
ffxsam
- 26,428
- 32
- 94
- 144
45
votes
4 answers
TypeScript skipLibCheck still checking node_modules libs
I am using TypeScript with React, and TypeScript is still checking libraries in node_modules folder, although I have "skipLibCheck" set to true in tsconfig.json..
Here's my tsconfig.json (I added the exclude section for troubleshooting, which also…
dj1
- 451
- 1
- 4
- 4
33
votes
2 answers
How should I handle a leave animation in componentWillUnmount in React?
I was wondering if anyone could provide some insight about how they handle leave animations in React.js. I have been using Greensock TweenMax and the enter animations work fine on componentDidMount, but I haven't found a reliable way to animate a…
jaredkwright
- 1,390
- 2
- 11
- 27
14
votes
5 answers
How To Use ScrollMagic with GSAP and Webpack
In order to use ScrollMagic with GSAP, you need to load the animation.gsap.js plugin. With Webpack you would do something like this to accomplish that (assuming you use the CommonJS syntax and installed everything with npm):
var TweenMax =…
medoingthings
- 2,985
- 3
- 17
- 17
13
votes
2 answers
Draw SVG Bezier curve
I have an array of control points that represent a high-order Bezier curve.
How can I draw this curve using a single SVG-path?
UPD:
For example, I have a set of points: (x1, y1) (x2, y2) (x3, y3) (x4, y4) (x5, y5).How SVG-path will look like in the…
Legotin
- 2,378
- 1
- 18
- 28
12
votes
2 answers
During testing a vue component in jest document.querySelector always returns null
This is my test:
jest.mock('gsap')
import TweenMax from '../../__mocks__/gsap'
import Component from '@/components/Callback/Form.vue'
import { shallow, createLocalVue } from '@vue/test-utils'
const localVue = createLocalVue()
test('phone opacity…
Alexander Shpindler
- 811
- 1
- 11
- 31
11
votes
1 answer
jQuery Animation vs GreenSock TweenMax
I encounter with a question what the cons and pros of using jquery.animate() and GreenSock TweenMax animating engines. So maybe there is any one who knows it. There is not enough information on the web, also what about the performance.
I tried to…
GomatoX
- 400
- 1
- 3
- 20
10
votes
2 answers
MouseOver CSS3D effect with javascript
I am trying to achieve mouseOver effect like this.
I am able to generate css3d matrix required for each and every tile according to their position.
I have achieved this effect with slow mouse movement, but if I am moving fast from one tile to…
Manish Mahajan
- 1,140
- 1
- 14
- 38
9
votes
1 answer
Typescript/React: How can a ref be added to a material-ui Box component?
How can a ref be added to a material-ui Box component in React, using TypeScript? This is important to allow animation libraries like GreenSock / GSAP to animate nodes. Per material-ui docs, using the itemRef will not work because it requires the…
sebastian
- 179
- 1
- 2
- 8
9
votes
1 answer
How to time travel to end of animation using React Jest
I'm trying to test a component which change state after a TweenMax animation. Everything's fine on browser, but I cannot understand how to write a test for it.
The problem is Jest doesn't wait for the animation to complete, therefore state doesn't…
a.barbieri
- 2,398
- 3
- 30
- 58
9
votes
4 answers
Countdown timer 'delays' when tab is inactive?
Trying to build a very simple Javascript countdown. However, whenever the tab is inactive, the countdown begins to lag and holds an incorrect count.
See jsfiddle here for example: https://jsfiddle.net/gbx4ftcn/
function initTimer(t) {
var self…
Adam Ayrton Stoner
- 93
- 1
- 5
9
votes
3 answers
Sounds fade in/out with ActionScript 3
I am trying to make a fade in/out in a music in a Flash (CS5) project. I imported the sound to library, set a classname for "Export for ActionScript", and I was trying to fade with TweenLite/TweenMax, like this:
var sound = new MySound();
sT = new…
CrociDB
- 1,234
- 1
- 7
- 20
9
votes
2 answers
How to make continuous animations for elements with shorter animation duration's [GASP]
I have the following GASP animation:
$(function () {
var tmax_options = {
repeat: -1
};
var tmax_tl = new TimelineMax(tmax_options),
tween_options_to = {
css: {
rotation: 360,
transformOrigin:…
Alexander Solonik
- 9,838
- 18
- 76
- 174
9
votes
2 answers
JS animation architectural design for optimal performance
The performance gains of the GreenSock animation engine are pretty dramatic.
What underlying architectural decisions and trade-offs is this library making to achieve such gains? In particular, what is this engine doing different than jQuery…
jedierikb
- 12,752
- 22
- 95
- 166
8
votes
2 answers
Why Animation is not happening as expected to place box to bottom
I'm trying to perform animation on click of box which is expected as below
When box is clicked it must move to the right to either 300px or right most then it should go to the bottom.
Note: if it is achieved using tweenMax (GSAP). Then solution…
EaBengaluru
- 131
- 2
- 17
- 59