tweenlite

TweenLite does not animate

由 99封情书 提交于 2020-01-03 13:41:09
问题 I am trying to do a simple animation of top-margin using GreenSocks TweenLite for Javascript. I've used the library many times but, for some reason, it's not working this time. Note: The "onComplete" is firing but, no matter what element I use, I cannot animate any CSS properties on HTML elements. HTML <div id="GS_PipelineHeadline h2"></div> JAVASCRIPT TweenLite.to("#GS_PipelineHeadline h2", 0.5, { "margin-top": 0, ease: "Back.easeOut", onComplete: function () { console.log("Crap"); } });

Fading in different items and different times using Greensock Tween

由 房东的猫 提交于 2019-12-23 04:15:49
问题 I am really new with GSAP and I think it is amazing. However I cannot work out how to fade in these items separately. 1st one (this is fine) for the 2nd wish to fade in at a certain time and 3rd at a certain time. JavaScript: function startFinalAnimation(){ var fa = new TimelineLite(); fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"}); fa.to(finalContent, 4, {delay: 0, opacity: 1}); fa.to(logo, 5, {delay: 0, opacity: 1}); } 回答1: TimelineLite 's .to()

Greensock Tweenlite transformations

由 拟墨画扇 提交于 2019-12-13 05:21:42
问题 I'm using tweenlite library to rotate, move and zoom image. The problem is, that I get 3D transformations on image, but I would like to have 2D transformations. If tweenlite detects that there is browser which doesn't support 3D, he will do 2d. How can I force him to always do 2D? It must be some setting. Or just disable 3D. (3d inside svg doesn't work in any IE browser) This is ok: transform="matrix(0.1082 0 0 0.1082 97 58)" This is what I don't wont to have: transform: matrix3d(0.1082, 0, 0

Shallow rendering a component which depends on TweenLite

由 …衆ロ難τιáo~ 提交于 2019-12-12 21:38:43
问题 I'm trying to make a simple unit test with a React component but I keep getting: C:\work\portfolio\node_modules\gsap\TweenMax.js:13 import TweenLite, { TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear } from "./TweenLite.js"; ^^^^^^^^^ Which is an error with an import of one of children's of 'App' components 3rd party libraries. import React from "react"; import { shallow } from 'enzyme'; import App from "./App"; fit("renders without crashing", () => { const wrapper = shallow

Add and remove class different elements

由 [亡魂溺海] 提交于 2019-12-12 15:16:45
问题 So im currently learning jquery and a little bit of tweenlite for animations (I wanna keep it basic). So im currently building a portfolio grid but I wanna add on a click of an element that the other element is fading in (sliding from right it doesn't matter). But I can't find a way to make it work that 1 element have 1 box to show and the other element have a different box to show without coping the code over and over and change a simple number everytime, there must be a way to make it work

JQuery/GSAP - Moving multiple elements parallel to each other

由 被刻印的时光 ゝ 提交于 2019-12-12 03:37:16
问题 What I want to do is this: I want to generate boxes on the Y or X axis of the page (the bottom and left border) and make them move parallel to each other until they've gone off-screen, where I want to delete them. This is what I've done so far: Codepen . function generate(){ var $element = $("<div>", {class: "box"}); //Generate random x and y coordinates var posy = (Math.random() * ($('body').height() - $element.width())).toFixed(); var posx = (Math.random() * ($('body').width() - $element

Tweenmax callback being executed before the animation end

由 血红的双手。 提交于 2019-12-10 22:25:37
问题 I am using the greensock gsap for animations on my web site. Problem are the callbacks who are executing before the end of the animation. In the example bellow the elements are being removed somewhere on the half of the animation. TweenLite.to($(".flipper"), 2, {rotationY:180,onComplete:function(){ $(this).remove() }}); Did anyone experienced the same issue? 回答1: As @hjuster pointed out, a transition declared in CSS can conflict with onComplete callback in TweenMax. I think that the reason

Sounds fade in/out with ActionScript 3

由 五迷三道 提交于 2019-12-08 15:59:19
问题 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 SoundTransform(0.1); sound.play(0,99999, c_sndEnvironment); TweenLite.to(sound, 1, {volume: 1.0}); But it just doesn't work. I tried to import the volume plugin on TweenLite, and still nothing. I got no error at all though. Am I doing anything wrong

Fading in different items and different times using Greensock Tween

由 僤鯓⒐⒋嵵緔 提交于 2019-12-06 16:50:06
I am really new with GSAP and I think it is amazing. However I cannot work out how to fade in these items separately. 1st one (this is fine) for the 2nd wish to fade in at a certain time and 3rd at a certain time. JavaScript: function startFinalAnimation(){ var fa = new TimelineLite(); fa.to(finalAvatar, 2, {scale: 0.45, delay: 0, opacity: 1, transformOrigin:"-3% 8.8%"}); fa.to(finalContent, 4, {delay: 0, opacity: 1}); fa.to(logo, 5, {delay: 0, opacity: 1}); } TimelineLite 's .to() method syntax is as follows: timeline.to(target, duration, vars, position); This fourth position parameter is
订阅 tweenlite