Jump to content
Search Community

How to create two sections, where one is a lottie animation, stuck throughout while scrolling and the other is text?

Sameer_mishraa test
Moderator Tag

Recommended Posts

Hi everyone !

I am planning to create this sort of website (refer to the video linked below) where as you can see the mockup of a phone, so in that phone, a lottie animation should run when the user scrolls down and in the right, you can see the heading and some description, while scrolling down, the phone's mockup is stuck through out and doesn't get  scrolled down, only the animation inside it runs while the right side of the page (heading and text and all) gets scrolled down. (The phone part is what I have been able to pull off so far, but I am stuck with the part on the right)

 

Please let me know how can I achieve this ?  Thank you a lot in advance.

 

@GSAP Helper @OSUblake

 

 

(sorry for the audio in the video, kindly ignore)

 

Link to comment
Share on other sites

  • Sameer_mishraa changed the title to How to create two sections, where one is a lottie animation, stuck throughout while scrolling and the other is text?

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

 

One option you could explore is the ScrollTrigger and Lottie helper function

 

https://greensock.com/docs/v3/HelperFunctions#lottie

 

Happy Tweening!

Link to comment
Share on other sites

Hey @GSAP Helper I appreciate your response. 
 

So, actually it is not an issue, rather it's just an idea. The video is of a prototype I designed with Adobe XD, I want to know how can I achieve such a screen with the help of GSAP, where left half is not scrolling, the phone mockup is stuck throughout the scroll (the lottie animation inside it is scrolling within the phone mockup) , whereas the right part is scrolling.

Any help is much appreciated.

 

Thank You a lot @GSAP Helper

 

Also, let me know if what I am trying to achieve is not clear at all.

Link to comment
Share on other sites

Hey @Rodrigo so I was studying your code and tried to replicate it in vs code and I'm getting the following preview:
image.thumb.png.4b58d2b129fe644959a97b0cf471d13d.png

After scrolling:

image.thumb.png.6a057fc66357a79b1d4136260617ff7b.png

 

(It's exactly your code, so most probably there's some error in inclusion of tags or css may be)

Sharing the code with you for better understanding :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dbait</title>
    <link rel="stylesheet" href="/css/style.css">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<!-- First screen for test -->
<div class="w-1/2 h-screen bg-sky-600 flex flex-col justify-center items-center p-8"><div class="w-full h-screen flex justify-center">
    <div class="container mx-auto p-8 flex flex-col justify-center items-center">
      <h1 class="text-4xl text-center font-semibold mb-12">GSAP ScrollTrigger Combined Lateral Sections</h1>
      <p class="text-lg font-medium mb-8">Each section has a panel that has the height of the screen, while another panel's height is bigger than the height of the screen.</p>
      <p class="text-lg font-medium">Scroll down to pin each section and animate the side panel that's bigger than the screen on each section.</p>
    </div>
  </div>
  <div class="vertical-section w-full h-screen overflow-hidden flex text-white text-lg" id="sectionOne">
    <div class="w-1/2 h-screen bg-sky-600 flex flex-col justify-center items-center p-8">
      <h1 class="text-3xl font-semibold mb-8">This doesn't move</h1>
      <img src="https://images.unsplash.com/photo-1666146421175-28a429221ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&h=480&q=60" alt="">
    </div>
    <div class="w-1/2 p-8 bg-orange-600">
      <div class="large-child">
        <p class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam quia nam nulla nostrum impedit, amet totam voluptatem tenetur veritatis explicabo dolore quaerat, suscipit pariatur dolorum, accusamus nihil dolores deleniti. Tempora odit, aut nostrum vel debitis iure soluta repellendus, earum consequuntur architecto incidunt cum explicabo animi modi provident fugit quidem nam.</p>
        <p class="mb-4">Distinctio ipsa, saepe inventore assumenda nostrum maiores dolores. Dolorum nulla error, rem amet iste delectus porro laborum saepe dolore earum obcaecati esse cum possimus repellat distinctio perferendis quam ex doloribus officiis? Culpa minima animi pariatur sint, id corporis, accusantium suscipit, esse iusto eum totam nemo nihil ratione dolor vitae. Eius.</p>
        <p class="mb-4">Ratione libero nostrum rem nulla nobis quasi, molestiae maxime. Itaque doloremque neque voluptatem, obcaecati tenetur dolor quis nisi ad culpa delectus, suscipit voluptatibus eligendi quo dignissimos quisquam, non eveniet modi laudantium? Quaerat soluta ea saepe quod, atque asperiores. Libero vero fugiat modi optio voluptatem neque excepturi sit ab! Ullam, reiciendis!</p>
        <p class="mb-4">Quae, dolor neque voluptatibus dignissimos saepe officia, ducimus asperiores accusamus vitae consequatur tempore cumque ipsam, doloribus tenetur nemo officiis enim. Recusandae, delectus porro. Consequuntur animi explicabo enim ducimus! Cum culpa vitae excepturi eum odit! Iure quisquam, facilis fuga commodi sequi rerum, fugiat quam ipsum atque alias qui distinctio quasi expedita.</p>
        <p class="mb-4">Odit assumenda molestiae dolorem minus magnam error ea similique porro optio fuga at accusamus soluta saepe expedita necessitatibus itaque harum, nostrum adipisci deleniti consequuntur rem? Placeat aut obcaecati consequatur soluta dicta animi sed facere aliquam, quos odit mollitia dolorem cupiditate corrupti modi minus molestiae, reprehenderit sit odio voluptatum, fuga nemo.</p>
        <p class="mb-4">Laboriosam odio temporibus blanditiis minima nam facere quidem quam cumque modi accusamus odit, corrupti voluptates aspernatur quisquam natus minus expedita? Voluptates, officiis maxime incidunt amet aut vitae, consectetur in eius ad ullam, repellat dolore nihil laborum sed facilis ut maiores aliquam natus voluptatem! Dicta quaerat eum id. Perferendis, inventore praesentium?</p>
        <p class="mb-4">Maxime velit mollitia illo, iusto, ducimus molestiae, cumque ipsam inventore laudantium minima delectus fuga ipsa itaque. Reprehenderit assumenda aut harum enim! Iusto mollitia ad ducimus dolor tempora molestias harum ratione ipsum corrupti. Et accusantium eius temporibus quidem voluptatibus aperiam, sit, neque enim totam consequuntur ad. Soluta labore et sequi at.</p>
        <p class="mb-4">Dicta nulla odio nesciunt cum neque veniam eveniet! Tenetur eum aliquam deleniti ab suscipit quibusdam quae! In quidem molestias necessitatibus, impedit sint excepturi velit ipsa eaque ab asperiores quisquam iusto voluptate! Temporibus asperiores pariatur nesciunt, veniam iusto quos ad rem vitae expedita numquam autem molestias porro nulla, illo fugiat. Laboriosam!</p>
        <p class="mb-4">At, adipisci ab voluptatum eligendi laboriosam commodi necessitatibus id eius inventore. Quasi ipsam totam ex libero adipisci? Dignissimos dolorum possimus non architecto suscipit sit, fugit assumenda quae? Reprehenderit architecto nemo, tempora doloribus adipisci officiis incidunt illo ipsa cumque et iusto nostrum inventore veniam recusandae officia non? Nulla, modi voluptatum? Molestias.</p>
        <p class="mb-4">Et magnam, itaque, consectetur quo praesentium a nemo, earum nobis autem vitae quis illo expedita. Numquam iure molestias porro inventore, ratione perferendis quisquam praesentium exercitationem doloremque architecto adipisci autem eaque amet vel maxime recusandae accusamus hic rem quaerat sapiente odit at aperiam magni? Dignissimos quae voluptates sint fuga, voluptatem quod.</p>
        <p class="mb-4">Consequuntur dignissimos vel qui nisi laboriosam voluptate cum praesentium soluta eius, architecto tenetur ipsam. Nostrum corrupti reiciendis error? Suscipit perferendis nulla optio atque temporibus vel iste obcaecati voluptate sint. Velit, ducimus quidem. Similique id delectus quae nemo cupiditate. Et, libero. Assumenda doloribus error fugiat dolorum temporibus facilis, deleniti quis ad!</p>
        <p class="mb-4">Vel doloremque et rerum quod dolorem porro, assumenda ab quis quasi sint iste rem cupiditate reiciendis quia aliquid necessitatibus qui! Aut explicabo recusandae, sit consequatur laborum mollitia obcaecati animi tempora aspernatur temporibus! Quidem, voluptatibus voluptas vitae debitis ullam possimus dolorem minus accusamus deleniti inventore voluptatem. Officia magni eveniet sunt rem.</p>
        <p class="mb-4">Maiores ducimus delectus, id eaque labore laudantium earum numquam velit fuga quod. Earum placeat quis ad nisi cum reiciendis. Quia explicabo quos, et non voluptatem nostrum est vero harum officiis delectus ipsam voluptatibus vel fuga. Doloribus dicta eaque repellendus laborum, officiis voluptas dolorum rem temporibus nemo tempore doloremque laboriosam numquam.</p>
        <p class="mb-4">Natus nihil maxime, error ipsa expedita quod aliquam odit officiis, aperiam eos est consequuntur nobis saepe eius quibusdam. Dignissimos veniam aliquid sint ad accusamus a natus, distinctio voluptatibus non? Dolore dolores tempore voluptas. Animi dignissimos officiis at numquam reiciendis, accusamus magnam sapiente, necessitatibus deserunt, cumque ea molestiae adipisci quos! Eaque!</p>
        <p class="mb-4">Architecto quibusdam temporibus omnis expedita. Nihil, cupiditate non! Perferendis quis eligendi facere ex aperiam deserunt similique numquam. Labore numquam distinctio quam perferendis facilis laboriosam explicabo quos facere officia. Et amet aut laudantium sunt ipsum vel molestiae ea officiis explicabo, voluptates molestias aliquid neque accusantium numquam eum doloremque sit repellendus id.</p>
        <p class="mb-4">Quos, saepe. Suscipit, dolores. Nulla, itaque laboriosam ullam voluptatibus soluta reiciendis. Quia nihil omnis numquam eveniet nobis aliquid ex est, ratione laborum voluptas ipsam veniam labore nulla molestiae dignissimos ad deserunt sapiente repudiandae. Iusto quibusdam praesentium totam unde doloremque reprehenderit officia cupiditate! Voluptatem adipisci nesciunt quisquam ab, inventore ex minima.</p>
        <p class="mb-4">Nulla facilis quisquam expedita doloribus, odio in hic ipsa aliquid ut odit sequi voluptates quam asperiores voluptas reiciendis, cupiditate, excepturi numquam porro vero quod quidem accusamus nam labore obcaecati! Qui, et numquam error assumenda facilis tenetur ipsam ipsa consectetur eaque, nisi fugit at earum magnam saepe consequatur, aut dignissimos voluptate?</p>
        <p class="mb-4">Commodi eveniet voluptates illo harum, facere atque ipsum esse facilis reiciendis perferendis fugit inventore vitae? Eaque ipsa ducimus incidunt, architecto quis sapiente voluptatem deleniti? Sint, corrupti molestias soluta magnam natus quam fuga ea, minus assumenda, illum dolores explicabo ad! Quidem commodi nulla earum esse atque qui reprehenderit nisi quaerat et.</p>
        <p class="mb-4">Repellat, sunt nesciunt tempora at veritatis deserunt dolorum vero minima perspiciatis repudiandae? Ab, laborum doloribus omnis fugiat, saepe praesentium rerum autem iste eligendi aliquid dignissimos quae, reprehenderit perferendis. Quae nulla ut, nihil maiores natus corrupti explicabo, eum a iusto beatae et. Placeat illum nostrum eligendi minima vel fuga nihil enim?</p>
        <p class="mb-4">Unde voluptatum, neque optio voluptatem, ullam necessitatibus ipsa provident quisquam deserunt explicabo asperiores sint repellat nisi odio, libero numquam totam ipsum? Exercitationem recusandae tempora enim mollitia dolores repudiandae commodi et minus tenetur fugiat nulla dolor sed, delectus dolore. Impedit eligendi odit pariatur. Repellendus nobis odio provident ea sequi autem atque?</p>
        <p class="mb-4">Fuga animi delectus, expedita fugit ad voluptates saepe tenetur doloribus soluta sequi facilis, assumenda dolor ipsa eos magni provident laborum nulla modi! Obcaecati deleniti eos ducimus ullam iusto eius aliquid voluptates reprehenderit quisquam esse ex commodi temporibus earum porro ipsum impedit natus modi culpa dicta, quia nam repellat? Dolore, nihil.</p>
        <p class="mb-4">Accusantium laudantium recusandae et repudiandae beatae molestiae, ex fugit. Adipisci vitae distinctio doloremque libero voluptate. Voluptatibus corporis quod nemo doloremque nihil molestias, minima modi in, sunt officiis totam omnis doloribus porro ducimus molestiae distinctio voluptatem itaque rem illum? Fugit, quos! Possimus voluptate necessitatibus dicta quis, consequatur nisi quidem libero ex?</p>
        <p class="mb-4">Dolorem itaque doloremque assumenda illo autem quos nihil qui laborum quasi ea, voluptatum odio at ad explicabo. Enim consequuntur illum ipsum! Deserunt excepturi illum, quos magnam accusamus, non, ut rem minus aut temporibus at mollitia hic deleniti? Omnis totam assumenda exercitationem ea! Aliquam consequuntur iste laboriosam aperiam pariatur sint quae.</p>
        <p class="mb-4">Nostrum, quia. Error voluptate est quis, laudantium sed soluta repellendus quo illum quam corrupti, minima facilis numquam ad? Reprehenderit laborum molestias sed similique. Aliquam iure corporis voluptate, dolores, commodi voluptatem cupiditate consequuntur, dolore nulla qui iste quisquam? Sequi saepe nobis ullam a, incidunt ipsum pariatur vero mollitia! Repellendus, cumque totam.</p>
        <p class="mb-4">Repudiandae provident hic voluptate nostrum cumque, quis quibusdam culpa atque necessitatibus fuga repellat pariatur, assumenda numquam dicta magni quam quasi voluptatibus? Nam a et laborum repellendus non. Repellat corrupti distinctio, consectetur dolores iste vel exercitationem voluptate molestias ab aspernatur ipsam odio quia dolorem officia eaque cumque dolorum. Dolore, vero consectetur?</p>
      </div>
    </div>
  </div>
  <div class="vertical-section w-full h-screen overflow-hidden flex text-white text-lg" id="sectionTwo">
    <div class="w-1/2  p-8 bg-indigo-600">
      <div class="large-child">
        <p class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam quia nam nulla nostrum impedit, amet totam voluptatem tenetur veritatis explicabo dolore quaerat, suscipit pariatur dolorum, accusamus nihil dolores deleniti. Tempora odit, aut nostrum vel debitis iure soluta repellendus, earum consequuntur architecto incidunt cum explicabo animi modi provident fugit quidem nam.</p>
        <p class="mb-4">Distinctio ipsa, saepe inventore assumenda nostrum maiores dolores. Dolorum nulla error, rem amet iste delectus porro laborum saepe dolore earum obcaecati esse cum possimus repellat distinctio perferendis quam ex doloribus officiis? Culpa minima animi pariatur sint, id corporis, accusantium suscipit, esse iusto eum totam nemo nihil ratione dolor vitae. Eius.</p>
        <p class="mb-4">Ratione libero nostrum rem nulla nobis quasi, molestiae maxime. Itaque doloremque neque voluptatem, obcaecati tenetur dolor quis nisi ad culpa delectus, suscipit voluptatibus eligendi quo dignissimos quisquam, non eveniet modi laudantium? Quaerat soluta ea saepe quod, atque asperiores. Libero vero fugiat modi optio voluptatem neque excepturi sit ab! Ullam, reiciendis!</p>
        <p class="mb-4">Quae, dolor neque voluptatibus dignissimos saepe officia, ducimus asperiores accusamus vitae consequatur tempore cumque ipsam, doloribus tenetur nemo officiis enim. Recusandae, delectus porro. Consequuntur animi explicabo enim ducimus! Cum culpa vitae excepturi eum odit! Iure quisquam, facilis fuga commodi sequi rerum, fugiat quam ipsum atque alias qui distinctio quasi expedita.</p>
        <p class="mb-4">Odit assumenda molestiae dolorem minus magnam error ea similique porro optio fuga at accusamus soluta saepe expedita necessitatibus itaque harum, nostrum adipisci deleniti consequuntur rem? Placeat aut obcaecati consequatur soluta dicta animi sed facere aliquam, quos odit mollitia dolorem cupiditate corrupti modi minus molestiae, reprehenderit sit odio voluptatum, fuga nemo.</p>
        <p class="mb-4">Laboriosam odio temporibus blanditiis minima nam facere quidem quam cumque modi accusamus odit, corrupti voluptates aspernatur quisquam natus minus expedita? Voluptates, officiis maxime incidunt amet aut vitae, consectetur in eius ad ullam, repellat dolore nihil laborum sed facilis ut maiores aliquam natus voluptatem! Dicta quaerat eum id. Perferendis, inventore praesentium?</p>
        <p class="mb-4">Maxime velit mollitia illo, iusto, ducimus molestiae, cumque ipsam inventore laudantium minima delectus fuga ipsa itaque. Reprehenderit assumenda aut harum enim! Iusto mollitia ad ducimus dolor tempora molestias harum ratione ipsum corrupti. Et accusantium eius temporibus quidem voluptatibus aperiam, sit, neque enim totam consequuntur ad. Soluta labore et sequi at.</p>
        <p class="mb-4">Dicta nulla odio nesciunt cum neque veniam eveniet! Tenetur eum aliquam deleniti ab suscipit quibusdam quae! In quidem molestias necessitatibus, impedit sint excepturi velit ipsa eaque ab asperiores quisquam iusto voluptate! Temporibus asperiores pariatur nesciunt, veniam iusto quos ad rem vitae expedita numquam autem molestias porro nulla, illo fugiat. Laboriosam!</p>
        <p class="mb-4">At, adipisci ab voluptatum eligendi laboriosam commodi necessitatibus id eius inventore. Quasi ipsam totam ex libero adipisci? Dignissimos dolorum possimus non architecto suscipit sit, fugit assumenda quae? Reprehenderit architecto nemo, tempora doloribus adipisci officiis incidunt illo ipsa cumque et iusto nostrum inventore veniam recusandae officia non? Nulla, modi voluptatum? Molestias.</p>
        <p class="mb-4">Et magnam, itaque, consectetur quo praesentium a nemo, earum nobis autem vitae quis illo expedita. Numquam iure molestias porro inventore, ratione perferendis quisquam praesentium exercitationem doloremque architecto adipisci autem eaque amet vel maxime recusandae accusamus hic rem quaerat sapiente odit at aperiam magni? Dignissimos quae voluptates sint fuga, voluptatem quod.</p>
        <p class="mb-4">Consequuntur dignissimos vel qui nisi laboriosam voluptate cum praesentium soluta eius, architecto tenetur ipsam. Nostrum corrupti reiciendis error? Suscipit perferendis nulla optio atque temporibus vel iste obcaecati voluptate sint. Velit, ducimus quidem. Similique id delectus quae nemo cupiditate. Et, libero. Assumenda doloribus error fugiat dolorum temporibus facilis, deleniti quis ad!</p>
        <p class="mb-4">Vel doloremque et rerum quod dolorem porro, assumenda ab quis quasi sint iste rem cupiditate reiciendis quia aliquid necessitatibus qui! Aut explicabo recusandae, sit consequatur laborum mollitia obcaecati animi tempora aspernatur temporibus! Quidem, voluptatibus voluptas vitae debitis ullam possimus dolorem minus accusamus deleniti inventore voluptatem. Officia magni eveniet sunt rem.</p>
        <p class="mb-4">Maiores ducimus delectus, id eaque labore laudantium earum numquam velit fuga quod. Earum placeat quis ad nisi cum reiciendis. Quia explicabo quos, et non voluptatem nostrum est vero harum officiis delectus ipsam voluptatibus vel fuga. Doloribus dicta eaque repellendus laborum, officiis voluptas dolorum rem temporibus nemo tempore doloremque laboriosam numquam.</p>
        <p class="mb-4">Natus nihil maxime, error ipsa expedita quod aliquam odit officiis, aperiam eos est consequuntur nobis saepe eius quibusdam. Dignissimos veniam aliquid sint ad accusamus a natus, distinctio voluptatibus non? Dolore dolores tempore voluptas. Animi dignissimos officiis at numquam reiciendis, accusamus magnam sapiente, necessitatibus deserunt, cumque ea molestiae adipisci quos! Eaque!</p>
        <p class="mb-4">Architecto quibusdam temporibus omnis expedita. Nihil, cupiditate non! Perferendis quis eligendi facere ex aperiam deserunt similique numquam. Labore numquam distinctio quam perferendis facilis laboriosam explicabo quos facere officia. Et amet aut laudantium sunt ipsum vel molestiae ea officiis explicabo, voluptates molestias aliquid neque accusantium numquam eum doloremque sit repellendus id.</p>
        <p class="mb-4">Quos, saepe. Suscipit, dolores. Nulla, itaque laboriosam ullam voluptatibus soluta reiciendis. Quia nihil omnis numquam eveniet nobis aliquid ex est, ratione laborum voluptas ipsam veniam labore nulla molestiae dignissimos ad deserunt sapiente repudiandae. Iusto quibusdam praesentium totam unde doloremque reprehenderit officia cupiditate! Voluptatem adipisci nesciunt quisquam ab, inventore ex minima.</p>
        <p class="mb-4">Nulla facilis quisquam expedita doloribus, odio in hic ipsa aliquid ut odit sequi voluptates quam asperiores voluptas reiciendis, cupiditate, excepturi numquam porro vero quod quidem accusamus nam labore obcaecati! Qui, et numquam error assumenda facilis tenetur ipsam ipsa consectetur eaque, nisi fugit at earum magnam saepe consequatur, aut dignissimos voluptate?</p>
        <p class="mb-4">Commodi eveniet voluptates illo harum, facere atque ipsum esse facilis reiciendis perferendis fugit inventore vitae? Eaque ipsa ducimus incidunt, architecto quis sapiente voluptatem deleniti? Sint, corrupti molestias soluta magnam natus quam fuga ea, minus assumenda, illum dolores explicabo ad! Quidem commodi nulla earum esse atque qui reprehenderit nisi quaerat et.</p>
        <p class="mb-4">Repellat, sunt nesciunt tempora at veritatis deserunt dolorum vero minima perspiciatis repudiandae? Ab, laborum doloribus omnis fugiat, saepe praesentium rerum autem iste eligendi aliquid dignissimos quae, reprehenderit perferendis. Quae nulla ut, nihil maiores natus corrupti explicabo, eum a iusto beatae et. Placeat illum nostrum eligendi minima vel fuga nihil enim?</p>
        <p class="mb-4">Unde voluptatum, neque optio voluptatem, ullam necessitatibus ipsa provident quisquam deserunt explicabo asperiores sint repellat nisi odio, libero numquam totam ipsum? Exercitationem recusandae tempora enim mollitia dolores repudiandae commodi et minus tenetur fugiat nulla dolor sed, delectus dolore. Impedit eligendi odit pariatur. Repellendus nobis odio provident ea sequi autem atque?</p>
        <p class="mb-4">Fuga animi delectus, expedita fugit ad voluptates saepe tenetur doloribus soluta sequi facilis, assumenda dolor ipsa eos magni provident laborum nulla modi! Obcaecati deleniti eos ducimus ullam iusto eius aliquid voluptates reprehenderit quisquam esse ex commodi temporibus earum porro ipsum impedit natus modi culpa dicta, quia nam repellat? Dolore, nihil.</p>
        <p class="mb-4">Accusantium laudantium recusandae et repudiandae beatae molestiae, ex fugit. Adipisci vitae distinctio doloremque libero voluptate. Voluptatibus corporis quod nemo doloremque nihil molestias, minima modi in, sunt officiis totam omnis doloribus porro ducimus molestiae distinctio voluptatem itaque rem illum? Fugit, quos! Possimus voluptate necessitatibus dicta quis, consequatur nisi quidem libero ex?</p>
        <p class="mb-4">Dolorem itaque doloremque assumenda illo autem quos nihil qui laborum quasi ea, voluptatum odio at ad explicabo. Enim consequuntur illum ipsum! Deserunt excepturi illum, quos magnam accusamus, non, ut rem minus aut temporibus at mollitia hic deleniti? Omnis totam assumenda exercitationem ea! Aliquam consequuntur iste laboriosam aperiam pariatur sint quae.</p>
        <p class="mb-4">Nostrum, quia. Error voluptate est quis, laudantium sed soluta repellendus quo illum quam corrupti, minima facilis numquam ad? Reprehenderit laborum molestias sed similique. Aliquam iure corporis voluptate, dolores, commodi voluptatem cupiditate consequuntur, dolore nulla qui iste quisquam? Sequi saepe nobis ullam a, incidunt ipsum pariatur vero mollitia! Repellendus, cumque totam.</p>
        <p class="mb-4">Repudiandae provident hic voluptate nostrum cumque, quis quibusdam culpa atque necessitatibus fuga repellat pariatur, assumenda numquam dicta magni quam quasi voluptatibus? Nam a et laborum repellendus non. Repellat corrupti distinctio, consectetur dolores iste vel exercitationem voluptate molestias ab aspernatur ipsam odio quia dolorem officia eaque cumque dolorum. Dolore, vero consectetur?</p>
      </div>
    </div>
    <div class="w-1/2 h-screen bg-teal-600 flex flex-col justify-center items-center">
      <h1 class="text-3xl font-semibold mb-8">This doesn't move</h1>
      <img src="https://images.unsplash.com/photo-1666146421175-28a429221ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&h=480&q=60" alt="">
    </div>
  </div>
  <div class="vertical-section w-full h-screen overflow-hidden flex text-white text-lg" id="sectionThree">
    <div class="w-1/2 h-screen bg-sky-600 flex flex-col justify-center items-center">
      <h1 class="text-3xl font-semibold mb-8">This doesn't move</h1>
      <img src="https://images.unsplash.com/photo-1666146421175-28a429221ba0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&h=480&q=60" alt="">
    </div>
    <div class="w-1/2 p-8 bg-orange-600">
      <div class="large-child">
        <p class="mb-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam quia nam nulla nostrum impedit, amet totam voluptatem tenetur veritatis explicabo dolore quaerat, suscipit pariatur dolorum, accusamus nihil dolores deleniti. Tempora odit, aut nostrum vel debitis iure soluta repellendus, earum consequuntur architecto incidunt cum explicabo animi modi provident fugit quidem nam.</p>
        <p class="mb-4">Distinctio ipsa, saepe inventore assumenda nostrum maiores dolores. Dolorum nulla error, rem amet iste delectus porro laborum saepe dolore earum obcaecati esse cum possimus repellat distinctio perferendis quam ex doloribus officiis? Culpa minima animi pariatur sint, id corporis, accusantium suscipit, esse iusto eum totam nemo nihil ratione dolor vitae. Eius.</p>
        <p class="mb-4">Ratione libero nostrum rem nulla nobis quasi, molestiae maxime. Itaque doloremque neque voluptatem, obcaecati tenetur dolor quis nisi ad culpa delectus, suscipit voluptatibus eligendi quo dignissimos quisquam, non eveniet modi laudantium? Quaerat soluta ea saepe quod, atque asperiores. Libero vero fugiat modi optio voluptatem neque excepturi sit ab! Ullam, reiciendis!</p>
        <p class="mb-4">Quae, dolor neque voluptatibus dignissimos saepe officia, ducimus asperiores accusamus vitae consequatur tempore cumque ipsam, doloribus tenetur nemo officiis enim. Recusandae, delectus porro. Consequuntur animi explicabo enim ducimus! Cum culpa vitae excepturi eum odit! Iure quisquam, facilis fuga commodi sequi rerum, fugiat quam ipsum atque alias qui distinctio quasi expedita.</p>
        <p class="mb-4">Odit assumenda molestiae dolorem minus magnam error ea similique porro optio fuga at accusamus soluta saepe expedita necessitatibus itaque harum, nostrum adipisci deleniti consequuntur rem? Placeat aut obcaecati consequatur soluta dicta animi sed facere aliquam, quos odit mollitia dolorem cupiditate corrupti modi minus molestiae, reprehenderit sit odio voluptatum, fuga nemo.</p>
        <p class="mb-4">Laboriosam odio temporibus blanditiis minima nam facere quidem quam cumque modi accusamus odit, corrupti voluptates aspernatur quisquam natus minus expedita? Voluptates, officiis maxime incidunt amet aut vitae, consectetur in eius ad ullam, repellat dolore nihil laborum sed facilis ut maiores aliquam natus voluptatem! Dicta quaerat eum id. Perferendis, inventore praesentium?</p>
        <p class="mb-4">Maxime velit mollitia illo, iusto, ducimus molestiae, cumque ipsam inventore laudantium minima delectus fuga ipsa itaque. Reprehenderit assumenda aut harum enim! Iusto mollitia ad ducimus dolor tempora molestias harum ratione ipsum corrupti. Et accusantium eius temporibus quidem voluptatibus aperiam, sit, neque enim totam consequuntur ad. Soluta labore et sequi at.</p>
        <p class="mb-4">Dicta nulla odio nesciunt cum neque veniam eveniet! Tenetur eum aliquam deleniti ab suscipit quibusdam quae! In quidem molestias necessitatibus, impedit sint excepturi velit ipsa eaque ab asperiores quisquam iusto voluptate! Temporibus asperiores pariatur nesciunt, veniam iusto quos ad rem vitae expedita numquam autem molestias porro nulla, illo fugiat. Laboriosam!</p>
        <p class="mb-4">At, adipisci ab voluptatum eligendi laboriosam commodi necessitatibus id eius inventore. Quasi ipsam totam ex libero adipisci? Dignissimos dolorum possimus non architecto suscipit sit, fugit assumenda quae? Reprehenderit architecto nemo, tempora doloribus adipisci officiis incidunt illo ipsa cumque et iusto nostrum inventore veniam recusandae officia non? Nulla, modi voluptatum? Molestias.</p>
        <p class="mb-4">Et magnam, itaque, consectetur quo praesentium a nemo, earum nobis autem vitae quis illo expedita. Numquam iure molestias porro inventore, ratione perferendis quisquam praesentium exercitationem doloremque architecto adipisci autem eaque amet vel maxime recusandae accusamus hic rem quaerat sapiente odit at aperiam magni? Dignissimos quae voluptates sint fuga, voluptatem quod.</p>
        <p class="mb-4">Consequuntur dignissimos vel qui nisi laboriosam voluptate cum praesentium soluta eius, architecto tenetur ipsam. Nostrum corrupti reiciendis error? Suscipit perferendis nulla optio atque temporibus vel iste obcaecati voluptate sint. Velit, ducimus quidem. Similique id delectus quae nemo cupiditate. Et, libero. Assumenda doloribus error fugiat dolorum temporibus facilis, deleniti quis ad!</p>
        <p class="mb-4">Vel doloremque et rerum quod dolorem porro, assumenda ab quis quasi sint iste rem cupiditate reiciendis quia aliquid necessitatibus qui! Aut explicabo recusandae, sit consequatur laborum mollitia obcaecati animi tempora aspernatur temporibus! Quidem, voluptatibus voluptas vitae debitis ullam possimus dolorem minus accusamus deleniti inventore voluptatem. Officia magni eveniet sunt rem.</p>
        <p class="mb-4">Maiores ducimus delectus, id eaque labore laudantium earum numquam velit fuga quod. Earum placeat quis ad nisi cum reiciendis. Quia explicabo quos, et non voluptatem nostrum est vero harum officiis delectus ipsam voluptatibus vel fuga. Doloribus dicta eaque repellendus laborum, officiis voluptas dolorum rem temporibus nemo tempore doloremque laboriosam numquam.</p>
        <p class="mb-4">Natus nihil maxime, error ipsa expedita quod aliquam odit officiis, aperiam eos est consequuntur nobis saepe eius quibusdam. Dignissimos veniam aliquid sint ad accusamus a natus, distinctio voluptatibus non? Dolore dolores tempore voluptas. Animi dignissimos officiis at numquam reiciendis, accusamus magnam sapiente, necessitatibus deserunt, cumque ea molestiae adipisci quos! Eaque!</p>
        <p class="mb-4">Architecto quibusdam temporibus omnis expedita. Nihil, cupiditate non! Perferendis quis eligendi facere ex aperiam deserunt similique numquam. Labore numquam distinctio quam perferendis facilis laboriosam explicabo quos facere officia. Et amet aut laudantium sunt ipsum vel molestiae ea officiis explicabo, voluptates molestias aliquid neque accusantium numquam eum doloremque sit repellendus id.</p>
        <p class="mb-4">Quos, saepe. Suscipit, dolores. Nulla, itaque laboriosam ullam voluptatibus soluta reiciendis. Quia nihil omnis numquam eveniet nobis aliquid ex est, ratione laborum voluptas ipsam veniam labore nulla molestiae dignissimos ad deserunt sapiente repudiandae. Iusto quibusdam praesentium totam unde doloremque reprehenderit officia cupiditate! Voluptatem adipisci nesciunt quisquam ab, inventore ex minima.</p>
        <p class="mb-4">Nulla facilis quisquam expedita doloribus, odio in hic ipsa aliquid ut odit sequi voluptates quam asperiores voluptas reiciendis, cupiditate, excepturi numquam porro vero quod quidem accusamus nam labore obcaecati! Qui, et numquam error assumenda facilis tenetur ipsam ipsa consectetur eaque, nisi fugit at earum magnam saepe consequatur, aut dignissimos voluptate?</p>
        <p class="mb-4">Commodi eveniet voluptates illo harum, facere atque ipsum esse facilis reiciendis perferendis fugit inventore vitae? Eaque ipsa ducimus incidunt, architecto quis sapiente voluptatem deleniti? Sint, corrupti molestias soluta magnam natus quam fuga ea, minus assumenda, illum dolores explicabo ad! Quidem commodi nulla earum esse atque qui reprehenderit nisi quaerat et.</p>
        <p class="mb-4">Repellat, sunt nesciunt tempora at veritatis deserunt dolorum vero minima perspiciatis repudiandae? Ab, laborum doloribus omnis fugiat, saepe praesentium rerum autem iste eligendi aliquid dignissimos quae, reprehenderit perferendis. Quae nulla ut, nihil maiores natus corrupti explicabo, eum a iusto beatae et. Placeat illum nostrum eligendi minima vel fuga nihil enim?</p>
        <p class="mb-4">Unde voluptatum, neque optio voluptatem, ullam necessitatibus ipsa provident quisquam deserunt explicabo asperiores sint repellat nisi odio, libero numquam totam ipsum? Exercitationem recusandae tempora enim mollitia dolores repudiandae commodi et minus tenetur fugiat nulla dolor sed, delectus dolore. Impedit eligendi odit pariatur. Repellendus nobis odio provident ea sequi autem atque?</p>
        <p class="mb-4">Fuga animi delectus, expedita fugit ad voluptates saepe tenetur doloribus soluta sequi facilis, assumenda dolor ipsa eos magni provident laborum nulla modi! Obcaecati deleniti eos ducimus ullam iusto eius aliquid voluptates reprehenderit quisquam esse ex commodi temporibus earum porro ipsum impedit natus modi culpa dicta, quia nam repellat? Dolore, nihil.</p>
        <p class="mb-4">Accusantium laudantium recusandae et repudiandae beatae molestiae, ex fugit. Adipisci vitae distinctio doloremque libero voluptate. Voluptatibus corporis quod nemo doloremque nihil molestias, minima modi in, sunt officiis totam omnis doloribus porro ducimus molestiae distinctio voluptatem itaque rem illum? Fugit, quos! Possimus voluptate necessitatibus dicta quis, consequatur nisi quidem libero ex?</p>
        <p class="mb-4">Dolorem itaque doloremque assumenda illo autem quos nihil qui laborum quasi ea, voluptatum odio at ad explicabo. Enim consequuntur illum ipsum! Deserunt excepturi illum, quos magnam accusamus, non, ut rem minus aut temporibus at mollitia hic deleniti? Omnis totam assumenda exercitationem ea! Aliquam consequuntur iste laboriosam aperiam pariatur sint quae.</p>
        <p class="mb-4">Nostrum, quia. Error voluptate est quis, laudantium sed soluta repellendus quo illum quam corrupti, minima facilis numquam ad? Reprehenderit laborum molestias sed similique. Aliquam iure corporis voluptate, dolores, commodi voluptatem cupiditate consequuntur, dolore nulla qui iste quisquam? Sequi saepe nobis ullam a, incidunt ipsum pariatur vero mollitia! Repellendus, cumque totam.</p>
        <p class="mb-4">Repudiandae provident hic voluptate nostrum cumque, quis quibusdam culpa atque necessitatibus fuga repellat pariatur, assumenda numquam dicta magni quam quasi voluptatibus? Nam a et laborum repellendus non. Repellat corrupti distinctio, consectetur dolores iste vel exercitationem voluptate molestias ab aspernatur ipsam odio quia dolorem officia eaque cumque dolorum. Dolore, vero consectetur?</p>
      </div>
    </div>
  </div>
  <section class="w-full h-screen flex justify-center items-center bg-gray-800 text-white px-4 py-2">
    <h1 class="text-4xl text-center font-semibold mb-12">Enjoy!!!</h1>
  </section>
  
  <header>
    <a href="https://greensock.com/scrolltrigger">
      <img class="greensock-icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg" width="200" height="64" />
    </a>
  </header>
  





<!------- Script Tags  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>


<script src="/app.js"></script>
</body>
</html>

Thanks a lot for your guidance in advance!

Link to comment
Share on other sites

Hi @Sameer_mishraa we can't really help you without a minimal demo. There is loads of factors that could cause issues in your local setup.

 

And it also isn't really for us that you build a minimal demo, it's more for yourself. Personally when making something new I start in Codepen and keep forking my pens until I have something I'm happy with, usually around version 20 I'll be ready to implement it into my project. The great thing about Codepen is that you can fall back on older versions when you inevitably break something when testing a new idea, this work flow allows you to be creative and you don't have to worry about your full project.

 

Please share a minimal demo, so we can give you some pointers in the right direction. Hope it helps and happy tweening! 

 

 

Link to comment
Share on other sites

I appreciate that @mvaneijgen and I really appreciate your response but what I am saying is that the code is exactly the same and issue is so probably in adding script tags and tailwind css and all... (I haven't really used Tailwind CSS before), so eventually when I would shift my project from codepen to VS Code, I will again get the same issue. 

 

Can you kindly help me with outline of how would you go shifting the above linked codepen url (shared by Rodrigo) to V S code ?

 

Thanks a lot!!

Link to comment
Share on other sites

Yeah, wasn't really the issue that I was facing. Anyways, I think I resolved that.

 

 

Here is a codepen:

See the Pen XWPZBKd by sameer-mishra1 (@sameer-mishra1) on CodePen

 

as you can see a lottie animation inside the phone mockup on the right side, after scrolling a bit, What I am trying to achieve is to make the phone mockup stick through out while the animation inside it completes through scrolling and doesn't begin until the phone is completely visible.

How can I achieve that ?

 

Thanks a lot @mvaneijgen @Rodrigo & @GSAP Helper !!

 

Link to comment
Share on other sites

Hi,

 

The duration of the ScrollTrigger instance has to match the Lottie speed parameter. Right now you have this:

// ScrollTrigger
sections.forEach((section) => {
  const large = section.querySelector(".large-child");
  gsap.to(large, {
    y: () => (window.innerHeight - large.clientHeight - 64),
    ease: "none",
    scrollTrigger: {
      trigger: section,
      pin: true,
      start: "top top",
      end: () => "+=1000",
      scrub: 0.5,
      markers: true,
      invalidateOnRefresh: true,
    }
  });
});
// Lottie Helper
LottieScrollTrigger({
  target: "#animation",
  path: "https://assets10.lottiefiles.com/packages/lf20_hsgjxstb.json",
  speed: "slow",
  scrub: 2, // seconds it takes for the playhead to "catch up"
  // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
});

In the Lottie helper slow equals to +=3000, so you have a 2000 pixels difference that is not reflected in the Lottie animation. This solves it:

sections.forEach((section) => {
  const large = section.querySelector(".large-child");
  gsap.to(large, {
    y: () => (window.innerHeight - large.clientHeight - 64),
    ease: "none",
    scrollTrigger: {
      trigger: section,
      pin: true,
      start: "top top",
      end: () => "+=3000",
      scrub: 0.5,
      markers: true,
      invalidateOnRefresh: true,
    }
  });
});


// Mobile animation 
LottieScrollTrigger({
  target: "#animation",
  path: "https://assets10.lottiefiles.com/packages/lf20_hsgjxstb.json",
  speed: "slow",
  markers: {
    startColor: "fuchsia",
    endColor: "fuchsia",
  },
  scrub: 2,
});

As a final advice is always a good idea to have the markers set to true in development, it helps you identify many problems such as this one.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

5 hours ago, Rodrigo said:

In the Lottie helper slow equals to +=3000, so you have a 2000 pixels difference that is not reflected in the Lottie animation

This is quite helpful @Rodrigo.

 

Although it doesn't still make the phone mockup stick while scrolling, yet it has given me tremendous insights. I'll try to tweak and do what I am trying to achieve (and will tell here if I get stuck again).

 

Thank you so much for your efforts!

  • Like 2
Link to comment
Share on other sites

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
  • Recently Browsing   0 members

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