Search the Community

Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections. I tried using this code function: function setSection(newSection) { if (newSection !== currentSection) { var tl = gsap.timeline(); tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 }); tl.to(currentSection, { autoAlpha: 0, duration: 0.5 }); var tl = gsap.timeline(); tl.to(newSection, { autoAlpha: 1, duration: 0.5 }); tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 }); currentSection = newSection; } } and set it to gsap.to(sections, {}); function like this: gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".container").offsetWidth }, onToggle: (self) => self.isActive && setSection(sections) }); However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment

Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });

Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!