Inspired by the Animated World Zoom, I wanted to try out rotate and zoom animations with GSAP easing.
Some of the code and Versor class is from Mike Bostocks notebook World Tour
A Pen by Stan Williams on CodePen.
Stan Williams stanwmusic
🏠
stanwmusic
/ around-the-in-885-seconds.markdown
Created
June 15, 2024 18:19
Around the 🌎 in 885 seconds
stanwmusic
/ accessible-tabs-animation.markdown
Created
May 19, 2024 20:50
Accessible Tabs ( Animation )
A Pen by Stan Williams on CodePen.
This file contains 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
| <main> | |
| <ul class='slider'> | |
| <li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')"> | |
| <div class='content'> | |
| <h2 class='title'>"RESPONSIVE IMAGE GALLERY"</h2> | |
| <p class='description'> Lorem ipsum, Snuffsum Dipsum | |
| dolor sit amet sit boy sit consectetur | |
| adipisicing elit. Tempore fuga voluptatum, iure corporis inventorey bloney samwich | |
| praesentium nisi. Id laboriosam ipsam enim. </p> | |
| <button>Read More</button> |
This file contains 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="stage"> | |
| <div class="container"> | |
| <div class="ring"> | |
| <div class="img"></div> | |
| <div class="img"></div> | |
| <div class="img"></div> | |
| <div class="img"></div> | |
| <div class="img"></div> |
A Pen by Stan Williams on CodePen.
This file contains 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
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title></title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <div id="navbarContainer"> | |
| <div id="navbar"> |
This file contains 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
| <header> | |
| <h1> | |
| <a target="_top" href="https://codepen.io/josetxu/full/jOQegyB" id="tuner-title"> | |
| <span>O</span><span>nline</span> | |
| <span>G</span><span>uitar</span> | |
| <span>T</span><span>uner</span> | |
| </a> | |
| </h1> | |
| <a class="josetxu-btn" href="https://josetxu.com" target="_blank"></a> | |
| <button id="e-classic" class="change-guitar" onclick="changeGuitar(this.id)"></button> |
This file contains 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="content"> | |
| <section class="header"> | |
| <h1><u>🖥️ - ON PAGE SCROLL PLUGIN V 1.7 - 🖥️ </u></h1> | |
| <b><p>Now the height of each section can be set to your value and not <br>min-height: 'window.height()'</p></b> | |
| <p>This is the Header (.header)</p> | |
| <p>You can Enable/Disable it by setting the option like this:</p> | |
| <p><b>'header' : 'your jQ selector'</b></p> | |
| </section> | |
| <section class="section"> | |
| <div> |
This file contains 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="content"> | |
| <section class="header"> | |
| <h1><u>🖥️ - ONE PAGE SCROLL PLUGIN V 1.7 - 🖥️ </u></h1> | |
| <b><p>Now the height of each section can be set to your value and not <br>min-height: 'window.height()'</p></b> | |
| <p>This is the Header (.header)</p> | |
| <p>You can Enable/Disable it by setting the option like this:</p> | |
| <p><b>'header' : 'your jQ selector'</b></p> | |
| </section> | |
| <section class="section"> | |
| <div> |
This file contains 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
| <header> | |
| <h1> | |
| <a target="_top" href="https://codepen.io/josetxu/full/jOQegyB" id="tuner-title"> | |
| <span>O</span><span>nline</span> | |
| <span>G</span><span>uitar</span> | |
| <span>T</span><span>uner</span> | |
| </a> | |
| </h1> | |
| <a class="josetxu-btn" href="https://josetxu.com" target="_blank"></a> | |
| <button id="e-classic" class="change-guitar" onclick="changeGuitar(this.id)"></button> |
NewerOlder