Search the Community
Showing results for tags 'foreach'.
Found 4 results
-
Hello, I recreated the issue I am experiencing in this Codepen: https://codepen.io/mariospittas/pen/dywBmRX Can you please help me figure out how to animate each link individually? Note: I am using a SplitType js library, but I don't think this has anything to do with the main issue. Thanks!
-
Hello there This is my first program with this library so im little bit confused for now. I created a little demo showing my problem. I want to create effect that triggers on scroll and moving my headers to the center of content. This works ok, as you can see in my code. Start position should be out from left side of window and moves to center. Looks "okay" but i have a couple questions: 1. How to avoid: my header jumps on center of the content when you scroll back (it should be out from window). U can see that text moves on the left side (out of the window) and immediatley jumps on center. - it should be stay out of the window. https://greensock.com/docs/v3/GSAP/gsap.to() Have I done something wrong? Maybe because im using startAt{}? instead use fromTo? - i tried with this but had problem with working well on my class using more than 1 header. Probably it is caused because of my low experience. 2. How to slow my animation? - too agressive for now. 3. A little problem to understand syntax of ScrollTrigger start: syntax start: "trigger" "viewport" ? I want start on top of my page and end of the center. In my main code i have navigation menu and u can jump on header and center of section pressing the appropriate button (anchor). - then header has to be centered. When you scroll up header should hide himself. - a little animatin When you scroll down (out form the window header) - header should move smoothly to center. When you scroll down (from center position) - nothing. So should i use start: "center bottom",? It looks ok. But when im scrolling up im unable to see if header goes back out from the window. Maybe this is a simple answer but im tired and i'm unable to figure it out. Thanks for any help and sources!
-
Hello! My goal is to have multiple gallery sections containing multiple columns that scroll at different speeds (using ScrollTrigger). To achieve the multiple sections, I'm using a forEach loop for each section as per https://codepen.io/GreenSock/pen/QWNqBvL, and also looping through the columns within each section. I'm seeing 2 issues with my current implementation: Despite the loop, the animations are triggering at the same time (when the Section 1 reaches the trigger). Each section should be triggering its own animations. I'm seeing the columns in Sections 2 and 3 suddenly reposition when the scroll ends. This isn't happening when on Section 1. Any help would be appreciated. Many thanks!
-
Hi, I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided). I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page. So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour. In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire. Does anyone know what is happening? Or what the best solution would be? P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like. P.P.S Any help would be hugely appreciated. function sliders () { var timerbar = document.querySelectorAll(".timerbar"); var tl1 = new TimelineMax({repeat: -1}); tl1 .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone}) .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2) .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2) .to(timerbar, 0, {scaleX: 0}) .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone}) .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2) .to(".js-stagger-1", 0, {y:30, opacity: 0}) .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2); } // sliders(); // FOREACH TRIGGER ON TEXT SLIDES var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger'); function scrollTrigger() { triggerBox.forEach(function(item){ var boxPosition = item.getBoundingClientRect().top; var boxPositionPercent = (boxPosition / window.innerHeight) * 100; if (boxPositionPercent <= 100) { // 100% equals bottom of viewport sliders(); } else { // somehow kill the function } }); } window.addEventListener("scroll", scrollTrigger);
