gareth

Is there anyway to add a pause between paragraphs when animating a splittext timeline?

ah neat! thanks working great.

I have a series of svg ellipse's that I want to rotate at diffrent speeds, I thought I could do this, but I guess this just picks a random duration for all of them? gsap.to("#rad ellipse", {rotation: 360, duration:"random(140, 1500)",repeat:-1,transformOrigin:"50% 50%"});

thanks! I have updated my codepen to use your suggested toggleActions. In my actual code all the sections are not the same height and less that 100vh so I have the problem that two sections are shown at once, how can I trigger it so the old section changes as the new section comes in, even if it still visible? I have changed the first section to 50vh to show the problem

Hi, I am trying to change the opacity of a li as you scroll into its lined section and then reverse it when you move to the next section. I am not sure how to reverse the tween when you move to the next section (back to .5 opacity)

ha! yep ?‍♂️ trying to do a stop motion style effect.. just remembered there is the rough ease that might help for this.

wow! quick replies thanks! So I guess I misunderstood how splittext works. I was not seeing the randomness as the values just were not different enough. Is there an easy to way to pendulum the characters so like yoyo, but they reverse the other way with the same random values?

Hi, Is it possible to have different random values for skews, rotations etc for each character in a split text tween? This is what I have so far: var split = new SplitText("h1", {type: "chars,words,lines", position: "relative"}); var randSkew = gsap.utils.random(-2, 2, true); var randRotate = gsap.utils.random(-2, 2, true); gsap.from(split.chars, {transformOrigin:"center",duration: .112,rotation:randRotate, skewY:randSkew,skewX:randSkew,scale:1.016,ease:"bounce",yoyo:true,repeat:-1}); cheers!

amazing, thank you both. I have made a small update to yours @Carl so we do not need jquery.

I have a text animation that shows one word at a time. Is there a way I can fire a function at the end of each staggerTo (i.e each paragraph?) This is what I have: tl.staggerTo(mySplitText.words, speed, {display:'block',repeat:1,yoyo:true}, speed*2,endOf) function endOf() { console.log ('end of paragraph') }

Thanks for the clarification. I agree it is great value , thank you for all your hard work.

Hi, I am creating a web app for a large companies intranet, will I require a commercial license?

ah! thanks so much for demo, it is spot on. I agree it does feel more natural.

ok so I can just grab the screen width (but will have to update on resize) var maxX = window.innerWidth; which brings me to my next question how do you control when the snap is triggered ? at the moment it looks like you have to exceed 50% for the menu to snap either way. Is is possible to change this to say 25% i.e if I drag past 25% the menu will snap to 100% ?

Hi, I have simple menu that I want to drag from 5% of the screen to 100%. // changing this to "100%" does not work var maxX = 320 Draggable.create(".menu", { type:"x", throwProps:true, edgeResistance: 1, maxDuration:0.3, bounds: {maxX:maxX, minX:0}, snap: { x: [0, maxX] } }); The menu works fine if I supply a pixel value for the bounds and snap points. It is possible to use % ? thanks, Gareth

thanks! that looks very helpful.

thanks Jonathan. It does not return the "live" value of the attr while tweening i.e it always returns M100,300 C100,100 125,40 125,40, not the values as it is tweening. is it possible to do that?

sorry please close, it is easier to just create a new tween for the circle. TweenMax.to("#circle", force, {x:bendAmount-100,repeat:-1,yoyo:true,ease:Power1.easeInOut});

I would like to be able to get a svg point value as the tween is updating, so I can move another svg in sync: var curve = { d: 'M100,300 C100,100 ' + bendAmount + ',40 ' + bendAmount + ',40' }; TweenMax.to("#pole", force, { attr: curve, repeat: -1, yoyo: true, ease: RoughEase.ease.config({ strength: 2, points: 20 }), onUpdate: topper, onUpdateParams:["{self}"] }); function topper (tween) { // how do I get the values of curve ? } I am trying to animate the circle so it attached to the top of the line.

thanks!

This works: var curve = {d:'M100,300 C100,100 ' + force +',40 ' + force +',40'}; TweenMax.to("#pole",force,{attr:curve,repeat:-1,yoyo:true});

Hi, How can I use a variable in the d section of this tween? TweenMax.to("#pole",force,{attr:{d:'M100,300 C100,100 110,40 110,40'},repeat:-1,yoyo:true}); I tried TweenMax.to("#pole",force,{attr:{d:'M100,300 C100,100' +force+',40' +force+',40'},repeat:-1,yoyo:true});

perfect thanks!

I have a simple animation which moves a 25% wide menu from off screen to 0: var menuMove = new TimelineMax(); menuMove.to(menu, menuSpeed, { left: "0", ease: Power4.easeInOut }) On my 27inch screen the animation is fast, on mobile it is very slow. Is there a way to tie speed to screen size?

would removing IE8 support reduce file size significantly? If so I think it would be very worthwhile.