CODEWITHSUNDEEP
javascripthtmljquerycssgsap
Massimo Cilluffo
Massimo Cilluffo

Reputation: 103

Parallax effect with GSAP

I have a question for you, hopefully you can help me. I am building myself a parallax effect using GSAP, -ScrollTrigger v3.5.1 and have built myself a function called parallax().

I want to animate multiple objects in my DOM within an area with different settings, which works.

Problem: If the function is called more than once in my code, the animation is not smooth anymore, especially when I work with negative and positive values.

JS:

parallax($('#fixed-hero-container .container'), $('#fixed-hero-container'), 0.3, -50, 0.3, true);
parallax($('#fixed-hero-container .container.container-d'), $('#fixed-hero-container'), 0.3, 100, 0.3, true);

function parallax(elA, elT, dur, val, scr, mark) {
        let tl = gsap.timeline();

        tl.to( elA, dur, {
            scrollTrigger: {
                trigger: elT,
                scrub: scr,
                markers: mark,
                start: '50% 50%',
                end: '55% 5%'
            },
            y: val,
            ease: 'power4.out'
        });
    }

HTML:

<div id="fixed-hero-container">
                <div class="fname">
                    <span class="container">M</span>
                    <span class="container container-d">a</span>
                    <span class="container">s</span>
                    <span class="container container-d">s</span>
                    <span class="container">i</span>
                    <span class="container container-d">m</span>
                    <span class="container">o</span>
                </div>

                <div class="name">
                    <span class="container">C</span>
                    <span class="container container-d">i</span>
                    <span class="container">l</span>
                    <span class="container container-d">l</span>
                    <span class="container">u</span>
                    <span class="container container-d">f</span>
                    <span class="container">f</span>
                    <span class="container container-d">o</span>
                </div>

                <!--<div class="scrollIndicator"></div>-->
            </div>

Via CSS I give the single .container = transform: translate(X,Y) for the starting point, because the starting point is different for each element.
Every span have display: inline-block;

Upvotes: 2

Views: 1724

Answers (1)

blex
blex

Reputation: 25634

You are applying the parallax function twice on the .container elements that also have a .container-d class.

Maybe you meant to use .container:not(.container-d) in the first one?

parallax($('#fixed-hero-container .container:not(.container-d)'), $('#fixed-hero-container'), 0.3, -50, 0.3, true);
parallax($('#fixed-hero-container .container.container-d'), $('#fixed-hero-container'), 0.3, 100, 0.3, true);

function parallax(elA, elT, dur, val, scr, mark) {
  let tl = gsap.timeline();

  tl.to(elA, dur, {
    scrollTrigger: {
      trigger: elT,
      scrub: scr,
      markers: mark,
      start: '0',
      end: '55% 5%'
    },
    y: val,
    ease: 'power4.out'
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script><div id="fixed-hero-container"> <div class="fname"> <span class="container">M</span> <span class="container container-d">a</span> <span class="container">s</span> <span class="container container-d">s</span> <span class="container">i</span> <span class="container container-d">m</span> <span class="container">o</span> </div><div class="name"> <span class="container">C</span> <span class="container container-d">i</span> <span class="container">l</span> <span class="container container-d">l</span> <span class="container">u</span> <span class="container container-d">f</span> <span class="container">f</span> <span class="container container-d">o</span> </div></div><style>body,html{min-height:300vh;margin:0;padding:0}#fixed-hero-container{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:34px;text-align:center;height:100vh;padding-top:20vh;background:#222;color:#fff}.container{display:inline-block}</style>

Upvotes: 2

Related Questions