A dynamic card swipe carousel with smooth transitions and visual effects.
Sponsored by: Java "The" Script
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Energy Display --> | |
| <div class="points-display"> | |
| <span class="points-icon">🌿</span> | |
| <span class="points-value" id="points-value">0</span> | |
| </div> | |
| <!-- Quick Power-ups Panel --> | |
| <div class="quick-powerups" id="quick-powerups"> | |
| <!-- Owned power-ups will be generated here --> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--------- Osmo [https://osmo.supply/] ---------> | |
| <section class="cloneable"> | |
| <div class="text-demo-wrap"> | |
| <h1 data-split="heading" class="text-demo-h">We’re using GSAP’s SplitText to break this content into lines, words, and individual characters. Experiment with staggered tweens, custom ease functions, and dynamic transforms to bring your headlines to life.</h1> | |
| <div class="text-demo-buttons"> | |
| <button data-split="button" data-split-type="lines" class="text-demo-button"><span>Lines</span></button> | |
| <button data-split="button" data-split-type="words" class="text-demo-button"><span>Words</span></button> | |
| <button data-split="button" data-split-type="letters" class="text-demo-button"><span>Letters</span></button> | |
| </div> | |
| </div> |
tolepcoy
/ gsap-component-full-screen-image-zoom-on-hover.markdown
Created
July 19, 2025 14:53
[gsap/component] ❍ Full Screen Image Zoom on Hover
A Pen by Filip Zrnzevic on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="slider-container"> | |
| <div class="content"> | |
| <div class="color-overlay"></div> | |
| <div class="product-name"> | |
| <span class="word-part first-word">Chai</span> | |
| <span class="word-part second-word">Vanilla</span> | |
| </div> | |
| <img class="milkshake-image" src="https://raw.githubusercontent.com/nidal1111/storage/master/assets/milkshake_banana.png" alt="Milkshake"> | |
| <div class="nutrition-panel"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Sorry guys for the bad code. I still have to optimize it.--> | |
| <h1>Don't forget to click on the arrow!</h1> | |
| <div id="iphone"> | |
| <div id="screen"> | |
| <ul> | |
| <li> | |
| <a class="title color1"><span>My Lists</span></a> | |
| <ul> | |
| <li> <a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Sorry guys for the bad code. I still have to optimize it.--> | |
| <h1>Don't forget to click on the arrow!</h1> | |
| <div id="iphone"> | |
| <div id="screen"> | |
| <ul> | |
| <li> | |
| <a class="title color1"><span>My Lists</span></a> | |
| <ul> | |
| <li> <a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="phone"> | |
| <nav class="navigation"> | |
| <ul class="navigation__list"> | |
| <li class="navigation__item"> | |
| <a class="navigation__link active" href="#home"> | |
| <i class="navigation__icon" data-feather="home"></i> | |
| <span class="navigation__text">HOME</span> | |
| </a> |
A tribute to the Hamburger Menu (made famous by Facebook's mobile app) and one kick ass sandwich, the Big Mac.
A Pen by Josh Bader on CodePen.
NewerOlder