Jump to content
Search Community

GGQa

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by GGQa

    Inifnite scroll problem

    in GSAP

    Posted

    I'm trying to do endless scrolling on my gallery page. I want three columns. The problem is, when I scroll down my wall, elements disappear and appear in weird ways ... and I want them to appear smoothly ...

    The strange thing is that when I have one column it all runs smoothly. Only in the case of three columns does this problem arise with ugly appearing elements ...

    See the Pen yLvYQjw by GGQa (@GGQa) on CodePen

    Image animation on hover with GSAP and Swiper.js

    in GSAP

    Posted

    Hey,

    I'my trying to make a slider for my project using gsap... I wish after scrolling the middle slide was opacity:1 and the rest of the pictures were opacity: 0. I would like the active middle image to be set to opacity: 1 only after end of animation (when it sets itself in the middle position - end transform) . How to do it with Gsap? 

    Thanks!

    See the Pen ExXPaaW by GGQa (@GGQa) on CodePen

    Menu animation while scrolling

    in GSAP

    Posted

    Hmm... the first problem here is the visible effect of adding a background to the menu while scrolling. 

    Second thing is I want to hide navigation with transform transform effect on meet "first" section. Actually in your example that menn changing position and background with some "progress". 

    Menu animation while scrolling

    in GSAP

    Posted

    Navigation while scrolling up adds a white background. In addition, I would like it to hide next to "first" section when scrolling up. Not just at the top. 
    Scenario: 

    1. Page loaded

    2. The menu is at the top in the Absolute position

    3. I scroll down (menu is hidding) 

    4. I scroll up (menu is visible + white background + fixed position) 

    5. When I scroll up and Trigger find the "first" section (menu is hidding by transform, and return to absolute position without background) 

    Menu animation while scrolling

    in GSAP

    Posted

    Sorry, I had a long day too. I expressed myself vaquely. Here is a perfect example of what I want to achieve.

    Ideally, this navi should hide before the scroll is at the top. So, for example, the Trigger to hide the animation while scrolling up would be the "first" section. 

    • Like 1

    Menu animation while scrolling

    in GSAP

    Posted

    Hello friends!

    I'm working on navi to my project.  I wish it would hide when scrolling down, and show when scrolling up. I was able to achieve this effect using ScrollTrigger butI I'd like to add one more thing to my code, wchich is: Adding a background color to 'nav' element (when scrolling top). I wish it it wasn't visible to the user., and that menu start and ends its animation after the 'first' section. So it should hide and "secretaly change background" if user scrolls up and comes across a section called 'first'

    Do you have any tips? Thank u! I hope I made myself clear...

    See the Pen mdwdEzb by GGQa (@GGQa) on CodePen

    Problem with 'transform' when when i use Scroll Trigger

    in GSAP

    Posted

    Hello, 

    I create a project with Gsap and ScrollTrigger. Gsap is used for scrolling in parallax, and ScrollTrigger is for animating elements while scrolling.

    The problem is that when Gsap animates elements using 'transform' - the ScrollTrigger cannot find the element to animate ...

    How can I deal with it?
    Thanks for help! 

     

    My code: 

    Gsap: 

    var t;
  $(window).scroll(function() {
  t = $(window).scrollTop();
  // console.log('scrolling! ' + t);
  TweenMax.to($(".divider-txt span"), 1, {
    y: -t / 7 + "px",
})

TweenMax.to($(".inner:nth-child(2n+1)"), 1, {
  ease: Power2.easeOut,
  y: -t / 20 + "px !important",
})


TweenMax.to($(".sticky-button"), 1, {
  ease: Power2.easeOut,
  y: t / 1 + "px !important",
})

TweenMax.to($(".footer"), 1, {
  ease: Power2.easeOut,
  y: -t / 7 + "px",
})


TweenMax.to($(".section"), 1, {
  ease: Power2.easeOut,
  y: -t + "px"
})

TweenMax.to($(".circles-mask.center"), 1, {
  ease: Power2.easeOut,
  rotation: -t / 16 + "px",
})

});

    ScrollTrigger 

    gsap.registerPlugin(ScrollTrigger);

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const titles = selectAll(".titles");
const captions = selectAll(".captions");
const images = selectAll(".images");

titles.forEach((title, i) => {   

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: title,
            toggleActions: "play reset play reset",	  
            start:"top top",
            end:"+=100%",
        }
    });

    tl.from(title.querySelectorAll('.titlein'), {
        duration:.5, 
        opacity:0
    }, .5)
});	

images.forEach((image, i) => {   

    let tl = gsap.timeline({
        scrollTrigger: {
            trigger: image,
            toggleActions: "play reset play reset",	  
            start:"top top",
            end:"+=100%",
        }
    });

    tl.from(image.querySelectorAll('.fader'), {
        duration:1, 
        opacity:0,
        
    }, .25)
});

    HML / CSS 

    .section{
  overflow-x: hidden;
  width:100%;
  max-width: 100%;
  will-change: transform;
  position: relative;
  z-index: 5;
}
    <section class="section about">
  <div class="images">
  	<img class="fader" src="https://jackewilson.files.wordpress.com/2014/08/baldwin-latimes.jpeg" style="width:100%;">
  </div>
</section>

     

×
×
  • Create New...