Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by takachan

  1. 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
  2. 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!
  3. 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"); })
  4. 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
  5. 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?
  6. Thank You!! Got everything to work as I wanted.
  7. oh wow thank you! just what I wanted! now i just need to figure out a way to have the animation not on repeat...
  8. 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?