Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About Kutomba

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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){
  2. 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('.tex
  3. 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, },
  4. 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
  5. 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() ?
  6. 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 t
  7. Thanks man , exaclty what I was looking for , God bless ya
  8. Paul do I need to include tl.kill() or is not needed in that if?
  9. 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 differ
  10. 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?
  11. 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,
  12. hej thanks for your explanation , I just needed a working demo as I mention above that am newbie, and its for learning purpose
  13. Here with splittext, but this split each char instead of word to word as I want , https://codepen.io/makumba/pen/PoNzxgV
  14. 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