Jump to content
Search Community

Heading is Jumping on intial sroll

vamsi12

By vamsi12
in GSAP

 Share

Recommended Posts

vamsi12

vamsi12

Posted
Posted

<html>
  <head>
    <link rel="stylesheet" href="./index.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
    <style>
    
    *{
        scroll-behavior:auto !important;
      }
    
  
     
     
      #text-container {
        position: absolute;
       top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #000000;
        font-size: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      

      }
      .container11 {
    text-align: center;
    position: absolute;
        top: 50%;
        left: 50%;
        
        transform: translate(-50%, 0%);
        text-align: center;
        color: #000000;
        font-size: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

}
canvas {
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges; 
  image-rendering: pixelated; 
  -ms-interpolation-mode: nearest-neighbor; 
  
}
.dunbox{
    width: 84px !important;
    
}
.text-data{
  font-family: "Plus Jakarta Sans", sans-serif;
}
.badge11 {
    display: inline-flex;
    align-items: center;
    background-color: #F1EDFF;
    border-radius: 8px;
    padding: 5px 15px;
    font-size: 14px;
    color: #431DC2;
    font-weight: bold;
    
}
#scroll-text{
  font-size: 64px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  margin-top: 20px;
  transform: translate(0%, -180%);

}
#scroll-text11{
  transform: translate(0%, -180%);
}
.heading-unboxed{
    font-size: 40px;
    font-weight: bold;
    color: #000;
    margin-top: 20px;
    margin-bottom: 20px;
    font-family: "Plus Jakarta Sans", sans-serif;
}
#page2{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 90px;
    
    
    
}

.badge11 .icon {
    margin-right: 5px;
    font-size: 16px;
    color: #431DC2;
}
.data-heading{
    color: #805AFF;
}


.cta-button {
    
    background-color: #000;
    color: #fff;
    padding: 3px;
    border-radius: 58px;
    width: 197px;
    height: 48px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
#scroll-text11{
    margin-bottom: 30px;
    outline: none;
    border-width: 0;
}
.arrow11{
  background-color: #F8F75E;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 46px;
}
.text-11{
  text-decoration: none;
  color: #FFFFFF;
  margin-left: 20px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  font-family: "Plus Jakarta Sans", sans-serif;
}
@media (min-width:320px) and (max-width:480px){
  #image-1{
    aspect-ratio: 1000/1000 !important;
  }
}

    </style>
  </head>
  <body>
    
    <div id="main">
      <div id="main2">
        <div id="page2">
          <canvas id="image-1" ></canvas>
          <div id="text-container">
            <video width="64" height="64" autoplay muted loop id="scroll-text11" style="opacity: 1;">
                <source src="https://dunboxed.com/wp-content/uploads/2024/10/Comp-2.mp4" type="video/mp4">
               
              </video>
            <p id="scroll-text" style="opacity: 1;">Data Is Powerful</p>
          </div>
          <div class="container11" id="container11" style="opacity: 0;">
            <div class="badge11">
                <span class="icon"><img src="https://dunboxed.com/wp-content/uploads/2024/10/dunboxed-logo.svg" class="img11"/></span>
                <span class="text-data">Data Is Powerful</span>
            </div>
            <h1 class="heading-unboxed">Unbox Your <span class="data-heading">Data Potential</span><br/> with Dunboxed</h1>
            <div class="cta-button">
            <a href="https://dunboxed.com/contact-us/" class="text-11">Get Started Today</a>
            <div class="arrow11">
              <img src="https://dunboxed.com/wp-content/uploads/2024/10/arrow-dunboxed.svg"/>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Timeline.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@latest/bundled/lenis.min.js"></script>
    <script>
      
      const lenis = new Lenis({
      duration: 0.8,  // Adjust the smoothness of the scroll
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Custom easing function
      smooth: true,
    });

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }

    requestAnimationFrame(raf);


    ScrollTrigger.scrollerProxy(document.body, {
  scrollTop(value) {
    return arguments.length
      ? lenis.scrollTo(value)
      : lenis.animatedScroll;
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
  },
  pinType: document.body.style.transform ? "transform" : "fixed",
});

// Update on animation frame
lenis.on("scroll", ScrollTrigger.update);


    
      
              const preloadLottie = () => {
    const lottiePlayer = document.querySelector("dotlottie-player");
    return new Promise((resolve, reject) => {
      lottiePlayer.addEventListener('load', resolve, { once: true });
      lottiePlayer.load();
    });
  };
  
  
  

      
      
    
      gsap.registerPlugin(ScrollTrigger);
      ScrollTrigger.defaults({
        
      });
    
      const canvas = document.querySelector("#page2>canvas");
      const context = canvas.getContext("2d");
    
      const canvasWidth = window.innerWidth ; 
    const canvasHeight = window.innerHeight * 0.9; 

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    window.addEventListener("resize", function () {
        const canvasWidth = window.innerWidth; 
        const canvasHeight = window.innerHeight * 0.9; 
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        render();
    });
    
      const frameCount = 155;
      const baseUrl = "https://dunboxed.com/wp-content/uploads/2024/11/final_animation2_";
      const images = [];
      const sequence = {
        frame: 2
      };
    
      for (let i = 0; i < frameCount; i++) {
        const img = new Image();
        img.src = `${baseUrl}${(i + 1).toString().padStart(5, "0")}.jpg`;
        images.push(img);
      }
    
      gsap.to(sequence, {
        frame: frameCount - 1,
        snap: "frame",
        ease: "none",
        scrollTrigger: {
          scrub: 0.4,
          start: `10% top`,
          end: `+=5000`,
          trigger: "#page2",
          onUpdate: function() {
            render();
            
            const text = document.getElementById("scroll-text");
const text11 = document.getElementById("scroll-text11");

// Text Opacity and Positioning Logic
if (sequence.frame <= 80) {
  text.style.opacity = 1;
  
  text11.style.opacity = 1;
 
} else if (sequence.frame > 80 && sequence.frame <= 90) {
  const fadeOutProgress = (sequence.frame - 80) / 10; // Calculate fade out progress
  text.style.opacity = 1 - fadeOutProgress;
  text.style.transform = `translate(0%, ${-180 - fadeOutProgress * 40}%)`; // Smooth transition upwards
  text11.style.opacity = 1 - fadeOutProgress;
  text11.style.transform = `translate(0%, ${-180 - fadeOutProgress * 40}%)`; // Smooth transition upwards
} else {
  text.style.opacity = 0; // Fully faded out after frame 90
  text.style.transform = `translate(0%, -220%)`;
  text11.style.opacity = 0; // Fully faded out after frame 90
  text11.style.transform = `translate(0%, -220%)`;
}


    
            const container1 = document.getElementById("container11");
let textOpacity1 = 0;
let textY = 0;

if (sequence.frame >= 108 && sequence.frame < 130) {
  textOpacity1 = (sequence.frame - 108) / 8;
  textY = -120 + (sequence.frame - 108); 
} else if (sequence.frame >= 130 && sequence.frame <= 155) {
  
  textOpacity1 = 1; 
  textY = -120 + (130 - 108); 
} else if (sequence.frame < 108) {
  textOpacity1 = 0; 
}

container1.style.opacity = textOpacity1;
container1.style.transform = `translate(-50%, ${textY}%)`;
          }
        }
      });
    
      images[2].onload = render;
    
      function render() {
        scaleImage(images[sequence.frame], context);
      }
    
      function scaleImage(img, ctx) {
        var canvas = ctx.canvas;
        var hRatio = canvas.width / img.width;
        var vRatio = canvas.height / img.height;
        var ratio = Math.min(hRatio, vRatio);
        var centerShift_x = (canvas.width - img.width * ratio) / 2;
        var centerShift_y = (canvas.height - img.height * ratio) / 2;
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(
          img,
          0,
          0,
          img.width,
          img.height,
          centerShift_x,
          centerShift_y,
          img.width * ratio,
          img.height * ratio
        );
      }
    
      ScrollTrigger.create({
        trigger: "#main",
        pin: true,
        start: `top top`,
        end: `+=5000`
      });
    </script>
  </body>
</html>


I am working in wordpress elementor one section i used custom code in that i written a custom code as mention above 
i am working on image sequence in wordpress can you fix the "data is powerfull" is jumping on intiall scroll and please check the video it should fixed without any jumping and scroll smoothly

https://www.loom.com/share/dcffc00fba024515b096428522120775?sid=a54fb642-d31f-4138-9b4e-a95cfbc0722e




 

GSAP Helper

GSAP Helper

Posted
Posted

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

vamsi12

vamsi12

Posted
  • Author
Posted

See the Pen qBeeRyr by Hima-Vamsi-Kummari (@Hima-Vamsi-Kummari) on CodePen.



this is the codepen link initially on scroll the data is powerful is jumping and also images are juming
on scroll it is giving jerk it should be smooth

mvaneijgen

mvaneijgen

Posted
Posted

Any particular reason why you would need to ScrollTriggers? One is only pinning the section, but this could be easily done all in the same ScrollTrigger.

 

Your onUpdate logic seems a bit confusing, why don't you just build a timeline add all your tweens to that one timeline and then have ScrollTrigger control that timeline, seems much easier to manage in my option. Check out our awesome getting started guide how timelines work https://gsap.com/resources/get-started/

 

Hope it helps and happy tweening! 

 

 

See the Pen xxvvdzo?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

  • Like 1
vamsi12

vamsi12

Posted
  • Author
Posted

sorry for the delay, can you please use the timeline for the above code and also on scrolling the text is not visible . It is going out of the viewport

mvaneijgen

mvaneijgen

Posted
Posted

I'm not sure what timeline you revering to and what text is not visible. With the feedback above please try your hand at a new solution and post back with what you've tried demonstrating the issue. Also try and explain what is happening now and what you expect to happen. If you can make a screen recording of the issue your having that is great, to me this animation seems to be doing what it should and I'm not sure what is going wrong?

mvaneijgen

mvaneijgen

Posted
Posted

Please check the demo, there it does not happen because I've set pin: true, on line 92 so include that in your code if you want it to pin

Rodrigo

Rodrigo

Posted
Posted

What exactly is the issue on that loom? What should be happening? You have a minimal demo (emphasis on minimal) that clearly illustrates the issue you're having?

 

A Loom video unfortunately doesn't really help us figuring out a problem.

Rodrigo

Rodrigo

Posted
Posted

Hi,

 

I don't really get the issue here, without a minimal demo (emphasis on minimal) there is not a lot we can do. On top of that @mvaneijgen already provided a fully working demo that doesn't exhibits any problems:

See the Pen xxvvdzo by mvaneijgen (@mvaneijgen) on CodePen.

 

That should be the starting point for your project. Start by adding Lenis to that demo and take it from there. If you face issues when Lenis is added to Mitchel's demo, then this is something related to the HTML/CSS in connection with Lenis. In that case start with a blank project with Lenis from the beginning and start adding elements and sections to it. Then start creating ScrollTrigger instances one by one until something breaks and you'll know where/when this is behaving oddly, then you can start trying solutions. At that point you can present a minimal demo with just that part of your project that is causing the issue

 

We've seen many projects work with ScrollTrigger and Lenis without any issues, so there is clearly a compatibility between the two tools, so something specific to your project is what's causing problems here. On top of that Lenis is not a GSAP product, we have our own smooth scrolling solution: ScrollSmoother which is 100% compatible with all the GSAP tools and plugins, so we can't really offer free general consulting here, is beyond the scope of what we do in these free forums.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...