takachan
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by takachan
-
Thank you so much! It works wanders!
-
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 } } });
-
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
-
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!
- 6 replies
-
- 2
-
-
- loop
- scrolltriger
- (and 2 more)
-
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"); })
-
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
-
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?
-
Thank You!! Got everything to work as I wanted.
-
oh wow thank you! just what I wanted! now i just need to figure out a way to have the animation not on repeat...
-
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?