Kevin Powell - Community•7mo ago

Vertical Carousel Animation

Hi, how to create a scrollable box area with content that scrolls from bottom to top, includes a gradient blur effect at the bottom, and loops back to the first box after reaching the last one. (infinite scroll)

7 Replies

reddogg476•7mo ago

This is normally achieved with HTML browser scoll, with those effects individually: gradient blur, infinite scroll. You'll want to isolate how each of those work just for your container element (ul --> li(s) div--> div(s) parent --> children). Do you have starter code with a container of choice?

Henry•7mo ago

@Nick Ji-Es Check this out. Not mine, but pretty sure the scroll behavior is quite close to what you are trying to do 🤔 https://codepen.io/Wataru-Ikeda-Kay/pen/bGybqqO Look into these properties:

  scroll-snap-type: x mandatory;
  scroll-timeline-name: --myScroller;
  scroll-timeline-axis: x;
  view-timeline: --cover;
  view-timeline-axis: inline;
  animation: z both linear;
  animation-timeline: --cover;
  animation-range: cover;

  scroll-snap-type: x mandatory;
  scroll-timeline-name: --myScroller;
  scroll-timeline-axis: x;
  view-timeline: --cover;
  view-timeline-axis: inline;
  animation: z both linear;
  animation-timeline: --cover;
  animation-range: cover;

Let us know how it goes! 🙂

Wataru Ikeda

CodePen

Pokemon Cards Scroll Animation

...

clevermissfox•7mo ago

Many of these are not yet supported, so be careful about using in anything but a playground or browser specific demo without a polyfill.

Daryl•6mo ago

I think this library solves a lot of things: https://www.embla-carousel.com/ Examples: * Loop: https://www.embla-carousel.com/examples/predefined/#loop * Vertical: https://www.embla-carousel.com/examples/predefined/#y-axis

www.embla-carousel.com

A lightweight carousel library with fluid motion and great swipe pr...

A lightweight carousel library with fluid motion and great swipe precision

www.embla-carousel.com

Predefined

Browse predefined Embla Carousel setups that demonstrates its features.

Lloyd PetersonOP•6mo ago

Hi @clevermissfox here is the example https://codepen.io/GreenSock/pen/qBYbqNj and here is my code, i use alpineJS and GSAP too

<div x-data="reasons" class="container scroll-here h-[650px] overflow-y-auto scrollbar-hide">
    <template x-for="reason in reasons" :key="reason.title">
        <div class="recipe-link reason tablet:w-[469px] 18k:w-[775px] rounded-[30px] border-[1px] border-gray-100 shadow-custom mb-5">
            <div class="w-full p-5 border-l-[6px] border-sub1 rounded-[30px]">
                <h6 class="text-black text-base 18k:text-[28px] font-bold leading-[33px] 18k:leading-[40px] tracking-[-0.32px] 18k:tracking-[-0.56px]" x-text="reason.title"></h6>
                <p class="mt-[10px] text-black text-sm 18k:text-2xl font-normal leading-normal tracking-[-0.28px] 18k:tracking-[-0.48px]" x-text="reason.description"></p>
            </div>
        </div>
    </template>
</div>

<div x-data="reasons" class="container scroll-here h-[650px] overflow-y-auto scrollbar-hide">
    <template x-for="reason in reasons" :key="reason.title">
        <div class="recipe-link reason tablet:w-[469px] 18k:w-[775px] rounded-[30px] border-[1px] border-gray-100 shadow-custom mb-5">
            <div class="w-full p-5 border-l-[6px] border-sub1 rounded-[30px]">
                <h6 class="text-black text-base 18k:text-[28px] font-bold leading-[33px] 18k:leading-[40px] tracking-[-0.32px] 18k:tracking-[-0.56px]" x-text="reason.title"></h6>
                <p class="mt-[10px] text-black text-sm 18k:text-2xl font-normal leading-normal tracking-[-0.28px] 18k:tracking-[-0.48px]" x-text="reason.description"></p>
            </div>
        </div>
    </template>
</div>

GSAP

CodePen

infinite vertical repeat on scroll with scrolltrigger on a tags

...

Lloyd PetersonOP•6mo ago

{{-- GSAP ANIMATION --}}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('reasons', () => ({
            reasons: [
                { title: 'Title1', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title2', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title3', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title4', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title5', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
            ]
        }));
    });
</script>

{{-- GSAP ANIMATION --}}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('reasons', () => ({
            reasons: [
                { title: 'Title1', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title2', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title3', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title4', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
                { title: 'Title5', description: 'Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem' },
            ]
        }));
    });
</script>

How can i implement the infinite vertical repeat on scroll in my code just like in code pen?

clevermissfox•6mo ago

nice, im glad you found something that works and is supported. i borrow this polyfill sometimes https://argyleink.github.io/scroll-timeline/dist/scroll-timeline.js

Gaming

Programming

Vertical Carousel Animation