Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

takachan's Achievements

  1. thank you for the reply, I have read the article and tested the codepen. as i mentioned above I have no experience with javascript but I did my best. Could you tell me what I am doing wrong here? const texts = gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { x:1000, duration:50, repeat:-1, ease:'linear', scrollTrigger: { trigger: text, } }) }); gsap.utils.toArray('.scrollingText'); texts.forEach(text => { gsap.to(text, { xPercent:15, scrollTrigger:{ trigger:".scrollingText", scrub:1, scrollTrigger: { trigger: text, scrub: true } } });
  2. Good day, I am fairy new to javascript and having difficulties figuring out how to create a multiple scroll trigger. I have found the perfect codepen, and what I want to do is to use this for multiple sections of my webpage to work individually. but currently, if I use it as it is, it applies to the whole section. I have tired to edit it, but sadly I did not have enough skill to make it to work on multiple section. The only thing I know what I must do is to, change the id to class for both html and js... Any help is appreciated. heres what I have done so far: https://codepen.io/jpholic_ty/pen/GRvpoYE original
  3. Thank you so much, it work wonders! I was able to understand the process. I hope to become like you one day! Thank you again for your patience!
  4. Thank you! (T_T) Am I going the right direction here? Tried my best to do what you explained to me here. gsap.registerPlugin(ScrollTrigger); const items = gsap.utils.toArray('.wrapper') var line = gsap.timeline({ scrollTrigger: { trigger: line, start: "center 90%" } }); items.forEach(function(item) { let line = item.querySelector('.line') tl.from(line, { scaleX: 0, transformOrigin: "right center" }); }) items.forEach(function(item) { let upper = item.querySelector('.line') tl.from(upper, { duration: 0.75, y: 30 }, "text"); }) items.forEach(function(item) { let lower = item.querySelector('.line') tl.from(lower, { duration: 0.75, y: -30 }, "text"); })
  5. thank you for the reply! Sorry, I am new to Javascript and having trouble understanding. tried my best to do what you mentioned. what Im I doing wrong here? https://codepen.io/jpholic_ty/pen/gOWeerX
  6. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  7. Thank You!! Got everything to work as I wanted.
  8. oh wow thank you! just what I wanted! now i just need to figure out a way to have the animation not on repeat...
  9. Good day, I want to create a text reveal animation as shown on the codepen as a scrolltrigger. To have the animation starts when the trigger reached the middle of the screen when scrolled. Can someone help me?