Jump to content

Diaco last won the day on December 20 2017

Diaco had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Diaco

  1. hmm ,pls try to place sequence js script tag at the end/bottom of <body> tag or use something like jquery $(document).ready()
  2. 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/
  3. 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 });
  4. 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; }; }});
  5. 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)
  6. 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() )
  7. 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/
  8. 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)
  9. Hi selvinkuik pls check and follow this blog post tips : http://greensock.com/morphsvg-update
  10. 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/
  11. 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
  12. 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/
  13. Hi Molt you can use x/y property : .to(".target",1,{left:'50%',top:'50%', x:20 ,xPercent:'-50',yPercent:'-50'})
  14. Hi SaintDominic138 pls check this out : http://codepen.io/MAW/pen/eJRqov
  15. 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
  16. 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
  17. 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' )
  18. 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
  19. Diaco


    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
  20. Hi jesper.landberg Works correctly and fires onComplete at the end , pls provide a reduced Codepen Demo of your case
  21. 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
  22. 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/
  23. Hi gredesign pls check this out : http://codepen.io/MAW/pen/gPWoYB/
  24. 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 )