Diaco last won the day on
Diaco had the most liked content!
-
Posts
1,215 -
Joined
-
Last visited
-
Days Won
86
Content Type
Profiles
Forums
Store
FAQ
Showcase
Product
Blog
ScrollTrigger Demos
Downloads
Everything posted by Diaco
-
Hi dreamoftrees pls check this out : http://codepen.io/MAW/pen/1857a89bf544ef690d91671b7ac1e5ee
-
Calling timeline function in the middle of another timeline
Diaco replied to kathryn.crawford's topic in GSAP
Hi kathryn.crawford pls check this out : http://codepen.io/MAW/pen/qOzNLz- 6 replies
-
- 4
-
-
- staggerto
- timelinemax
-
(and 2 more)
Tagged with:
-
so , this works too : .fromTo(".box", 0.7,{opacity:1},{opacity:.5}) .set(".hidden[data-id="+$(this).attr("data-id")+"]",{display:"block"},0) // set position parametr to 0 .set(".workLarge",{height:'auto'},0) // set position parametr to 0 .from(".workLarge",1,{height:0}) .fromTo(".hidden[data-id="+$(this).attr('data-id')+"]",1,{opacity:0},{opacity:1}); thanks Carl for detailed explanation
-
pls check Carl's answer / awesome video about immediateRender here : http://greensock.com/forums/topic/12059-help-with-simple-stagger/?p=53796
-
pls try this : .from(".workLarge",1,{height:0,immediateRender:false}) http://codepen.io/MAW/pen/RWmjJa
-
Hi celli pls check this out : http://codepen.io/MAW/pen/RWmjJa
-
Hi Dirk Diggler if i understood correctly , this's Codepen safe Link : https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js
-
Hi _Peter_ Yep , pls make a reduced Codepen Demo for your questions . but for now do you mean something like this ? : http://codepen.io/MAW/pen/62553e457d328d5c5653597c361e982b
-
Unfortunately we have to focus on GSAP api , not doing projects ... as Carl mention; i've already gone beyond of forums standard . i think that's better to check the Doc. specially this blog post about timeline's position-parameter : Understanding the Position Parameter and fork my second demo , i'm sure you can make your desired result
-
ok , pls check this out ( Full Page Slider ( GSAP Timeline ) #2 ) : http://codepen.io/MAW/pen/yYradO/
-
its just a Lable , so you have these lables in your timeline : 'L0' , 'L1' , 'L2' , 'L3' , ... one way to play tweens at same time ( tweens with same label ) , btw with adding labels you can seek to particular label/time in your timeline , and easily make nav dots
-
Splittext indents normally invisible spaces wrapped onto new lines
Diaco replied to plindelauf's topic in GSAP
Hi plindelauf pls remove this line from your css : white-space: pre-wrap; -
good idea ok guys , i will add things ( next/prev & nav dots , draggabel + ... ) thanks both
- 6 replies
-
- 1
-
-
- fullscreen
- slides
-
(and 2 more)
Tagged with:
-
i've just added 3D rotation : http://codepen.io/MAW/pen/XmozON
- 6 replies
-
- 4
-
-
- fullscreen
- slides
-
(and 2 more)
Tagged with:
-
Hi coco yep , with timeline it's super easy pls check this out : http://codepen.io/MAW/pen/XmozON
-
with setting the repeat parameter tweens will repeats with exactly same Vars( includes ease ) , so you need to generate new tween again with above or another method .
-
Hi nsohail pls check the MorphSVGPlugin Doc. : http://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/ you can find all the information you need + video tutorial btw , i don't think it's a good idea to morph complex graphic as your example ( from performance wise ; browsers/devices limitations + natural of svg graphics +... )
-
Hi kathryn.crawford Nope , for randomise tween pls try like this : var fFire=1 ; function flicker(){ if(!fFire)return false; TweenMax.to(obj,2,{ ..... ,onComplete:flicker}); }; flicker(); you can stop firing the function by setting fFire to 0 ; http://codepen.io/MAW/pen/MaMQry
-
Hi derp if i understood correctly , you can use onReverseComplete event callback , like this: TweenMax.to(div,1,{x:200, onComplete:function(){console.log('playComplete')}, onReverseComplete:function(){console.log('reverseComplete')}, }); pls check the .eventCallback() Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/
-
Hi tone4407 Yep , you have some issues in your SVG ( as jack mentioned space at the end + line break in your polygon points + ... ) , you can fix svg issues with this online tool : https://jakearchibald.github.io/svgomg/ pls check this out : http://codepen.io/MAW/pen/yYwXpZ btw , this's the DrawSVGPlugin link ( codepen version ) : https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js
-
Hi a7med.flash you can use static version of Draggable hit test : var Blue = document.querySelector('#blue'); var Red = document.querySelector('#red'); TweenLite.to(Red,2,{x:300,onUpdate:function(){ var hit = Draggable.hitTest( this.target , Blue , 10 ); console.log(hit); }}); or use js 2D collision detection methods ( same as above code , check with onUpdate fn ) : https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
-
Hi c-andrews the easiest way is this : http://codepen.io/MAW/pen/zveyMP another way is using Trigonometry