Diaco
-
Posts
1,215 -
Joined
-
Last visited
-
Days Won
86
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Everything posted by Diaco
-
hmm ,pls try to place sequence js script tag at the end/bottom of <body> tag or use something like jquery $(document).ready()
- 18 replies
-
- 1
-
-
- javascript
- jquery
- (and 4 more)
-
Hi Vahid-Designer Nope , you can't use Gsap Tweens and CSS animations/transitions together for same element . and about ' Javascript tweens vs css3 animations ' , pls check these posts : https://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://greensock.com/transitions/ http://greensock.com/css-performance http://greensock.com/css-workflow/
-
Hi dominate it's better to use Timeline , you can add tweens to tl and the new tweens will add at the end of timeline , however if you want to just load TweenLite , there's " onComplete " callback for tweens : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/ you can define onComplete callback with these ways : var myAnimation = TweenLite.to(obj,1,{...}); myAnimation.eventCallback("onComplete", myFunction); or TweenLite.to(obj,1,{... , onComplete : myFunction });
-
hmm , I think this's better than .stagger method : http://codepen.io/MAW/pen/adLBQK var imgIndex={i:1}, I=0 , img=document.getElementById('myImg'); var imgSrc = 'http://greenwich-design.co.uk/clients/guiltydolls/guilty_dolls2/images/seq/guilty_dolls_'; TweenMax.to(imgIndex,3,{i:97,roundProps:'i',repeat:-1,repeatDelay:1,ease:Linear.easeNone,onUpdate:function(){ if(I!==imgIndex.i){ var num = I<9?'0'+imgIndex.i:imgIndex.i; /* you can avoid above line by rename your image from ( ...01.jpg ) to ( ...1.jpg ) and remove "0" in less than 10 numbers , then use this line to setAttribute : img.setAttribute("src", imgSrc+I+'.jpg'); */ img.setAttribute("src", imgSrc+num+'.jpg'); I=imgIndex.i; }; }});
- 18 replies
-
- 1
-
-
- javascript
- jquery
- (and 4 more)
-
hmmm, i can't understand , what's your problem with this : http://codepen.io/MAW/pen/KVXgJP var imgs = document.querySelectorAll('.animatedimage img') var tl=new TimelineMax({repeat:-1,repeatDelay:1}) .staggerFrom(imgs,0,{opacity:0},0.04)
- 18 replies
-
- 1
-
-
- javascript
- jquery
- (and 4 more)
-
in addition to Carl's great advice , you can use a function to return child timeline too , like this : function shaketl(){ var tl = new TimelineLite(); shaketl.fromTo(this.phoneImg, 0.08, {scaleX:1, scaleY:1, rotation:4}, {scaleX:1.1, scaleY:1.1, rotation:-4, yoyo:true, repeat:10}); return tl; }; MasterTl .add( shaketl() ) .to(...,1,{...}) .to(...,1,{...}) .add( shaketl() )
-
Hi dada78 if i understood correctly ; pls check this out : http://codepen.io/MAW/pen/EPvBGq you can get timelines/tweens duration with .duration() method : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/duration/ and use .shiftChildren() method to shifts the startTime of the timeline's children by a certain amount : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/shiftChildren/
-
you just need these lines
-
Hi richfinch pls try this : var imgs = document.querySelectorAll('.animatedimage img') var tl=new TimelineMax({repeat:-1,repeatDelay:1}) .staggerFrom(imgs,0,{opacity:0},0.04)
- 18 replies
-
- 1
-
-
- javascript
- jquery
- (and 4 more)
-
Hi selvinkuik pls check and follow this blog post tips : http://greensock.com/morphsvg-update
-
Hi Graemezee seems there are 2 version of TweenMax loaded in your page , version 1.18.2 and 1.663 ( via jquery.scrollorama.js ) , so , pls check this thread : http://greensock.com/forums/topic/7753-two-versions-of-tweenmax-on-same-page/
-
Hi venn pls try like this : var MasterTl = new TimelineMax(); var redMove = new TimelineMax(); var redRotate = new TimelineMax(); var blueMove = new TimelineMax(); redMove.to('.red',1,{x:200}); redRotate.to('.red',1,{rotation:180}); blueMove.to('.blue',1,{x:200}); MasterTl.add(redMove); MasterTl.add(redRotate); MasterTl.add(blueMove); document.querySelector('.blue').addEventListener('click',function(){ MasterTl.remove(blueMove).reverse() }); http://codepen.io/MAW/pen/YwxZmO
-
Hi Bri Shhh pls check this out : http://codepen.io/MAW/pen/BjdpzR/ don't forget you need CSSRulePlugin to animating css pseudo elements via GSAP : http://greensock.com/docs/#/HTML5/Plugins/CSSRulePlugin/
-
Hi Molt you can use x/y property : .to(".target",1,{left:'50%',top:'50%', x:20 ,xPercent:'-50',yPercent:'-50'})
-
Hi SaintDominic138 pls check this out : http://codepen.io/MAW/pen/eJRqov
-
Hi zachschnackel if i understood correctly , nope GSAP just make ._gsTransform object ; as you can read in CssPlugin Doc : All transforms are cached in a _gsTransform object attached to the element, so you can tween individual properties without worrying that they'll be lost. You don't need to define all of the transform properties on every tween - only the ones you want to animate. You can read the transform-related values anytime, like element._gsTransform.scaleX
-
Hi Fakebook you should to define Tweens after appending ( when the new dom objects is ready ) , seems there's " customCallback " in that config object , and you can use that . http://codepen.io/jasonmayes/pen/Ioype
-
Hi spacewindow you can simply call your functions where you want in timelines : mainTl .to( obj , 1 , {} ) .to( obj , 1 , {} , 'label' ) .add( function(){ anotherTl.play() } , 'label' ) // start/run functions and tweens with same label at the same time .to( obj , 1 , {} ) .to( obj , 1 , {} , 'label2' ) .add( function(){ anotherTl.pause() } , 'label2' )
-
Hi urtopal pls use .fromTo() tween instead of .set() + .to() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/fromTo/ .fromTo(".red", 2,{x:200},{x:500}) and use .set() method instead of .to() with duration of '0' to setting value : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/ var myTimeline = new TimelineMax(); myTimeline .set(".red",{x:200}) .to(".red", 2,{x:500}) .pause(0); pls check this out : http://codepen.io/MAW/pen/GoEdNB
-
Hi nzbtorrent pls check these methods : .timeScale() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/timeScale/ .duration() : http://greensock.com/docs/#/HTML5/GSAP/TweenMax/duration/ these are common methods for Tweens and Timelines , check the Doc. : TweenMax : http://greensock.com/docs#/HTML5/GSAP/TweenMax/ TimelineMax : http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/ at the end ; that's better to make a reduced Codepen Demo for your questions : How to Create a CodePen Demo
-
Hi jesper.landberg Works correctly and fires onComplete at the end , pls provide a reduced Codepen Demo of your case
-
Hi daniel_pan pls try these ways : http://codepen.io/MAW/pen/jWmKQz tl.staggerTo(items, 0.15, {y:-10,opacity:1}, 0.1) .addPause(null,function(){ if(toggle)tl.play(); } ) .staggerTo(items, 0.15, {y:0,opacity:0.2}, 0.1) function over(){ tl.restart(); toggle=0; } function out(){ tl.play(); toggle=1; } or http://codepen.io/MAW/pen/PZmaxp function over(){ TweenMax.staggerTo(items, 0.2, {y:-10,opacity:1}, 0.1) }; function out(){ TweenMax.staggerTo(items, 0.2, {y:0,opacity:0.2}, 0.1) }; with second way , if you need to use timelines ; you should to define 2 timelines , or clean your timeline before adding new tweens : http://codepen.io/MAW/pen/GomGwN
-
hmm , if i understood correctly ; actually Draggable parallax and Parallax Scrolling are different things ( in action ) you can set draggable Parallax just for draggable type:'x' and handle y property with scrolling . any way scrolling method use the same concept , you should to get scroll position and set layers y property with different ratio . for more info about GSAP Draggable pls check the Doc : http://greensock.com/draggable http://greensock.com/docs/#/HTML5/Drag/Draggable/
-
yep , Dipscom is right , and you need to set position to absolute too : .logo{position:absolute;} , btw you can use x/y property instead of left/top , and have more smooth tween ( use subpixels instead of pixels )
