Lloyd Peterson
Lloyd Peterson
PostsComments
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/20/2024 in #front-end
Vertical Carousel Animation
How can i implement the infinite vertical repeat on scroll in my code just like in code pen?
9 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/20/2024 in #front-end
Vertical Carousel Animation
{{-- 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>
9 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/20/2024 in #front-end
Vertical Carousel Animation
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>
9 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/24/2024 in #front-end
Animate Button if active
@clevermissfox if i set the grid-row 2, is the other button still in order?
4 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/7/2024 in #front-end
How to achieve this style
thank you @vince , @EIO and @Rägnar for your help, Aprreciated! I already achieve the style.
9 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/4/2024 in #front-end
How to achieve this kind of layout
yes yesss thank you so much mark
8 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/4/2024 in #front-end
How to achieve this kind of layout
at the top there's an arrow
8 replies
KPCKevin Powell - Community
Created by Lloyd Peterson on 5/4/2024 in #front-end
How to achieve this kind of layout
only boxs
8 replies