tweenmax

GSAP with React.js

由 ▼魔方 西西 提交于 2019-12-11 17:38:01
问题 I encounter this problem. I use GSAP in react project to do some complicated animation. I want to ask that how can I clear the style applied on the DOM whenever the component re-render. It still keeps the old state which is the tl.reverse(). I set it it to Null again and re-define but i doesnt work. I'm also new to react. Below is code. Hope anyone can help componentDidMount () { this.menu_init() this.cta_animation_init() // this.cta_animation_active() this.hover_effect() $(window).on('scroll

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

How to animate correctly a GSAP menu?

由 天涯浪子 提交于 2019-12-08 13:23:33
问题 Holla, I need to reset the animation when I close menu and open it again. How can I do that? Animation works only the first time when I open menu. CSSPlugin.defaultTransformPerspective = 600; TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4); Here is the code: http://codepen.io/hafsadanguir/pen/qOdaab. Thanks for help! 回答1: Is this the kind of result you were after? JavaScript: CSSPlugin.defaultTransformPerspective = 600; var

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

MouseOver CSS3D effect with javascript

由 懵懂的女人 提交于 2019-12-04 19:55:55
问题 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 another tile its notupdating properly. its showing gap in between tiles. What is the best way to update all the tile/tile co-ordinates on mouseover so that i get consistent effect? here is my js code: $('.box').each(function() { $(this).css('height',

Draw SVG Bezier curve

由 China☆狼群 提交于 2019-12-04 03:01:50
问题 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 terms of C , S , Q or T ? UPD 2: SOLUTION I asked this question to depict a object path animated with TweenMax. Later I received reply on GreenSock forum. Here's CodePen example. 回答1: Short answer: you can't. SVG only has built in Quadratic (2nd

How to trigger a GSAP function when a slide comes active with Reveal.js?

由 ≡放荡痞女 提交于 2019-12-03 16:48:00
I want to add some simple animation to a presentation. I use GSAP (TweenMax) for this work. I have no problem with the animation setup, but these animations triggers as soon the presentation starts. How can I control this, so that only when the slide with animations is active the scripts execute? All your help is welcome. Regards! EDIT: Well, looks like reading the docs of the libraries answers at least 90% of this kind of questions. For the lazies (like me :) ) here´s what I found: To check when the slide change, we use this: Reveal.addEventListener( 'slidechanged', function( event ) { //

MouseOver CSS3D effect with javascript

由 瘦欲@ 提交于 2019-12-03 12:13:39
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 another tile its notupdating properly. its showing gap in between tiles. What is the best way to update all the tile/tile co-ordinates on mouseover so that i get consistent effect? here is my js code: $('.box').each(function() { $(this).css('height', '284px'); $(this).css('width', '284px'); }); generateGrid = function(w, h) { var t = this; this.p = [];

《基于JQuery和CSS的特效整理》系列分享专栏

由 六月ゝ 毕业季﹏ 提交于 2019-12-03 04:05:22
《基于JQuery和CSS的特效整理》已整理成PDF文档，点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 一款基于jQuery的图片水平滑动插件 一款基于jquery超炫的图片切换特效 一款基于jquery实现的鼠标单击出现水波特效 一款基于jquery滑动后固定于顶部的导航 一款基于javascript的3D玻璃破碎特效 分享一款基于jQuery的视频播放插件 一款基于jquery和css3实现的摩天轮式分享按钮 分享一款基于jquery的圆形动画按钮 ECharts,一款基于HTML5 Canvas的JavaScript图表库 一款基于jquery ui漂亮的可拖动div实例 一款基于prefixfree.js的进度加载条 一款基于jquery漂亮的按钮 一款基于jquery的侧边栏导航 一款基于TweenMax.js的网页幻灯片 一款基jquery超炫的动画导航菜单 一款基于jquery固定于顶部的导航 一款基jquery超炫的动画导航菜单可响应单击事件 一款基于jQuery Bootstrap响应式下拉菜单 一款基于css3的简单的鼠标悬停按钮 一款基于jquery的手风琴图片展示效果 一款基于css3非常实用的鼠标悬停特效

Canvas Image Animation (Crossfade)

由 走远了吗. 提交于 2019-12-02 09:50:54
Using HTML5 canvas I'm trying to load images and create a 'crossfade' effect where the first image fades into view then, after a short delay, the second image fades in over top of first image, etc. With the help of answers to similar questions on this forum I've got 2 separate bits of code working ... one which loads an array of images and a second which animates a 'fade in' effect. My problem is that I don't know how to combine these 2 scripts to load an array of images AND ALSO have each image in array fade in as it loads. Here are the 2 separate scripts I've got working: LOAD IMAGE ARRAY
订阅 tweenmax