Kutomba

Hi I have found this example on codepen: https://codepen.io/winterlion/pen/qBdZGGb?editors=0010 Now I need the same effect but with gsap 3 timeline , here is what I have tried so far HTML <h1 class='texta'>GreenSock Starter Template</h1> JS var split = new SplitText('.texta'); var timeline = gsap.timeline(); function random(min, max){ return (Math.random() * (max - min)) + min; } $(split.chars).each(function(i){ timeline.from($(this),{ duration: 0.1, opacity: 1, x: random(-500, 500), y: random(-500, 500), z: random(-500, 500), scale: .1, }); }); I am not getting the same effects , as the sample I found on code pen, what do I need to change to get the same effects? Thanks Kutomba

Hi I am trying to create a simple typewritter effects with gsap 3, here is my solution $('.button-li').on('click', function(){ $(".textbox").addClass('anim-typewriter'); $(".textbox").addClass('line-1'); var activeData = $(this).attr("data-active"); switch (activeData) { case 'typing': console.log('Typing animation'); var fieldTimeline = gsap.timeline({ paused: true, }); // letter animation fieldTimeline.fromTo('.textbox', 8, { width: "0", }, { width: "20.18em", /* same as CSS .line-1 width */ ease: SteppedEase.config(37) }, 0); // text cursor animation fieldTimeline.fromTo('.textbox', 0.5, { "border-right-color": "rgba(255,255,255,0.75)" }, { "border-right-color": "rgba(255,255,255,0)", repeat: -1, ease: SteppedEase.config(37) }, 0); break; } }) Unfortunaatelly this is not working, what is wrong here? https://codepen.io/makumba/pen/LYNRvQr

Hi I am learning how to synchronize animation with video time line here is my solution based on information provided in gsap forums const fade = gsap.to(".textbox", { opacity: 0, duration: 1, easing: "linear", repeat: -1, yoyo: true, paused: true }); const scale = gsap.to(".textbox", { scale: 2, repeat: -1, ease: "circ.in", yoyo: true, paused: true }); const split = new SplitText(".textbox", { type: "chars" }); const splitAnim = gsap.from(split.chars, { opacity: 0, y: 50, ease: "back(4)", stagger: { from: "end", each: 0.05, }, immediateRender: false, paused: true }); var vid = document.getElementById("myVideo"); console.log('myvideo', vid); function Update(){ fade.progress( vid.currentTime/vid.duration ) }; vid.onplay = function() { console.log('onplay') gsap.ticker.addEventListener('tick',Update); }; vid.onpause = function() { gsap.ticker.removeEventListener('tick',Update); }; $(".button-li").on("click", function () { fade.pause(0); scale.pause(0); splitAnim.pause(0); const activeData = $(this).attr("data-active"); switch (activeData) { case "default": console.log("no animation needed"); break; case "fade": console.log("fade animation"); fade.play(); break; case "scale": console.log("scale animation"); scale.play(); break; case "split": console.log("split animation"); splitAnim.play(); break; } }); So I started with fade animation so far, but unfortunatelly no errors and its not working, what is wrong here? Thanks Kutomba

Very good article , I love it , again thanks, by the way thanks to that articale I solved my problem using option number 8, now everything works like cham

Hi bro, its weird, when I create on code pen everything works fine, the same on my project when I remove the true to false I see its animating but otherwise when I want to play it on click its not animating , thanks for help, is there any way to change this state from true to false on click and the adding play() ?

Hi Guys I have one element with multiple animations eg scale, fade, split etc , I am adding these animations on click , all other animations works fine except split text , Here is my split text animation const typingText = new SplitText(".text-box"), { type: "chars" }); const typing = gsap.from(typingText.chars, { autoAlpha: 0, duration:1, visibility:"hidden", repeat: -1, repeatDelay: 1, stagger: 0.1, immediateRender: false, paused: true //changing this to false it animate but I want to animate only click with play method }); Here is click button $(".btn").on('click', function(){ ....... switch (data) { case "typing": console.log("typing animation"); typing.play(); console.log('yoyo', typing.paused()) break; } }); Now when I click a button to add split text animation , animation is not playing, so checking typing.paused() state I get the following result on console Note: When I change parameter paused to paused:false it animate the text after loading the page , I want only on click with play method to add animation to my text , but its not playing the animation ? What is wrong here ?

Thanks man , exaclty what I was looking for , God bless ya

Paul do I need to include tl.kill() or is not needed in that if?

Hii Greeen sockers I have created a tex , I would like on click to animate this text with different animations based on animation clicked , so if user clicked button fade it should animate a text with fade animation, if clicked button scale it should animate a text with scale animation, Problem: How to remove the previous addded animation ? eg user clicks scale animation button it animate the text and if user decide to change animation to fade in it should remove the previous added animation etc Here is my codepen : Animating one element with with different animation on clik Here is how I tried to solve the problem based on docs using kill() methods on click to remove tweens (animations) so that I can add new one if(tl !=null){ console.log('Yes') tl.kill(); }else{ console.log('no') } Unfortunatelly this is not working, what do I need to to do make this working as expected? Thanks Kutomba

Hi Zach, I am trying to synchronise with my video timeline, I learned it's possible to synchronise gsap animation with video timeline, So Is it possible with this kind of animation to animte using timeline if yes what is missing?

Hi, I am learning gsap, I found this example on codepen https://codepen.io/natewiley/pen/xGyZXp Now I would like to use gsap.timeline or gsap TimelineMax, I change it like this var text = $(".split"); var split = new SplitText(text); var tl = new TimelineMax(); // added timelinemax here function random(min, max){ return (Math.random() * (max - min)) + min; } $(split.chars).each(function(i){ tl.from($(this), 2.5, { // and used it here opacity: 0, x: random(-500, 500), y: random(-500, 500), z: random(-500, 500), scale: .1, delay: i * .02, yoyo: true, repeat: -1, repeatDelay: 10 }); }); Unfortunatelly this is not animating as expected, what do I need to change here to get the same result but using timeline? Thanks Kutomba

hej thanks for your explanation , I just needed a working demo as I mention above that am newbie, and its for learning purpose

Here with splittext, but this split each char instead of word to word as I want , https://codepen.io/makumba/pen/PoNzxgV

ok, thanks I will try

problem is I would like a user to insert text as he/she wants , doing the same as anime won't work (as for my understanding(newbie) , assume a user inserts a text like this <h1>You'd need to set up the HTML similar to the anime demo you linked<h2> thanks Kutomba