console
gsap.registerPlugin(ScrollTrigger);
gsap.registerEffect({
name: 'tech4',
extendTimeline: true,
effect: function (targets) {
const tl = gsap
.timeline()
.from(targets[0], {
duration: 0.5,
scale: 5,
yPercent: 80
})
// .to(targets[1], {
// duration: 0.5,
// opacity: 1
// })
// .fromTo(
// targets[2],
// {
// y: 60
// },
// {
// y: 0,
// opacity: 1
// }
// )
if (targets[3]) {
tl.fromTo(
targets[3],
{
y: 60
},
{
y: 0,
autoAlpha: 1
}
)
}
// tl.to(
// targets[4],
// {
// yPercent: -10
// },
// '<'
// ).set({}, {}, '+=0.2')
return tl
}
})
const stickyNavHeight = 65
const scrubTime = 0.5
const body = document.querySelector('body')
const section0 = body.querySelector('.section-atomic-0')
const section1 = body.querySelector('.section-atomic-1')
const anime = (section) => {
const svg = section.querySelector('.magic-svg')
const path = section.querySelectorAll('.magic-path')
const circle = section.querySelector('.magic-circle')
gsap
.timeline({
scrollTrigger: {
trigger: section,
start: 'top ' + stickyNavHeight,
end: 'bottom 100%',
scrub: scrubTime
}
})
.to(path, {
duration: 0.5,
strokeDasharray: '0% 0% 220%'
})
.to(circle, {
duration: 0.5,
opacity: 1
})
.from(
path,
{
duration: 0.5,
stroke: '#d7a85b',
strokeWidth: 2
},
'<'
)
.tech4([svg], '<')
}
anime(section0)
anime(section1)
<div class="section-atomic-1">
<div class="sticky-wrap">
<div class="wrap sticky-content">
<svg class="magic-svg" width="162px" height="146px" viewBox="0 0 162 146" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1536.000000, -479.000000)">
<g transform="translate(1542.400000, 483.800000)">
<ellipse class="magic-path" stroke="#000000" stroke-width="8" stroke-dasharray="0 220% 0" transform="translate(74.844732, 68.400000) rotate(-240.000000) translate(-74.844732, -68.400000) "
cx="74.8447318" cy="68.4" rx="31.5406825" ry="68.2132305"></ellipse>
<ellipse class="magic-path" stroke="#000000" stroke-width="8" stroke-dasharray="0 220% 0" cx="74.8447318" cy="68.4" rx="31.4542843"
ry="68.4"></ellipse>
<ellipse class="magic-path" stroke="#000000" stroke-width="8" stroke-dasharray="0 220% 0" transform="translate(74.844732, 68.400000) rotate(-300.000000) translate(-74.844732, -68.400000) "
cx="74.8447318" cy="68.4" rx="31.5406825" ry="68.2132305"></ellipse>
<ellipse ref="magicRingCircle" class="magic-circle" fill="#D7A85B" cx="74.8447318" cy="68.4" rx="10.4847614" ry="10.5230769"
opacity="0"></ellipse>
</g>
</g>
</g>
</svg>
</div>
</div>
</div>
<svg width="100%" height="150" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line stroke='black' stroke-width='4' stroke-dasharray="2 10%" x1="0" y1="10" x2="100%" y2="10" />
<g stroke="none" stroke-width="1" fill="none">
<ellipse class="magic-path" stroke="#000000" stroke-width="2" transform="translate(74.844732, 68.400000) rotate(-240.000000) translate(-74.844732, -68.400000) "
cx="74.8447318" cy="68.4" rx="31.5406825" ry="68.2132305"></ellipse>
</g>
</svg>
<div class="section-atomic-0">
<div class="sticky-wrap0">
<div class="wrap sticky-content">
<svg class="magic-svg" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 24 24">
<circle cx="12" cy="11.245" r="1.785" fill="currentColor" />
<g fill="none" stroke="#000000" stroke-width="1">
<path class="magic-path" stroke-dasharray="0 220% 0" d="m7.002 14.794l-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452c0-1.452 1.684-2.711 4.617-3.452l.395-.1l.111.391a19.507 19.507 0 0 0 1.136 2.983l.085.178l-.085.178c-.46.963-.841 1.961-1.136 2.985zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542c0 .954 1.368 1.913 3.598 2.54c.273-.868.603-1.717.985-2.54a20.356 20.356 0 0 1-.985-2.542m10.572 6.095l-.11-.392a19.628 19.628 0 0 0-1.137-2.984l-.085-.177l.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39l.395.1c2.935.741 4.617 2 4.617 3.453c0 1.452-1.683 2.711-4.617 3.452zm-.41-3.553c.4.866.733 1.718.987 2.54c2.23-.627 3.599-1.586 3.599-2.54c0-.956-1.368-1.913-3.599-2.542a20.683 20.683 0 0 1-.987 2.542"
/>
<path class="magic-path" stroke-dasharray="0 220% 0" d="m6.419 8.695l-.11-.39c-.826-2.908-.576-4.991.687-5.717c1.235-.715 3.222.13 5.303 2.265l.284.292l-.284.291a19.718 19.718 0 0 0-2.02 2.474l-.113.162l-.196.016a19.646 19.646 0 0 0-3.157.509zm1.582-5.529c-.224 0-.422.049-.589.145c-.828.477-.974 2.138-.404 4.38c.891-.197 1.79-.338 2.696-.417a21.058 21.058 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985m7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291l.283-.29a19.827 19.827 0 0 0 2.021-2.477l.112-.16l.194-.019a19.473 19.473 0 0 0 3.158-.507l.395-.1l.111.391c.822 2.906.573 4.992-.688 5.718a1.978 1.978 0 0 1-1.005.257m-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986c.225 0 .423-.05.589-.145c.829-.478.976-2.142.404-4.384c-.89.198-1.79.34-2.698.419a20.526 20.526 0 0 1-1.71 2.124"
/>
<path class="magic-path" stroke-dasharray="0 220% 0" d="m17.58 8.695l-.395-.099a19.477 19.477 0 0 0-3.158-.509l-.194-.017l-.112-.162A19.551 19.551 0 0 0 11.7 5.434l-.283-.291l.283-.29c2.08-2.134 4.066-2.979 5.303-2.265c1.262.727 1.513 2.81.688 5.717zm-3.287-1.421c.954.085 1.858.228 2.698.417c.571-2.242.425-3.903-.404-4.381c-.824-.477-2.375.253-4.004 1.841c.616.67 1.188 1.378 1.71 2.123M8.001 20.15a1.983 1.983 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391l.395.1c.964.243 2.026.414 3.158.507l.194.019l.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29l-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522m-.993-5.362c-.57 2.242-.424 3.906.404 4.384c.825.47 2.371-.255 4.005-1.842a21.17 21.17 0 0 1-1.713-2.123a20.692 20.692 0 0 1-2.696-.419"
/>
<path class="magic-path" d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017l-.113-.162a25.697 25.697 0 0 1-1.126-1.769a26.028 26.028 0 0 1-.971-1.859l-.084-.177l.084-.179c.299-.632.622-1.252.971-1.858c.347-.596.726-1.192 1.126-1.77l.113-.16l.196-.018a25.148 25.148 0 0 1 4.198 0l.194.019l.113.16a25.136 25.136 0 0 1 2.1 3.628l.083.179l-.083.177a24.742 24.742 0 0 1-2.1 3.628l-.113.162l-.194.017c-.706.057-1.412.087-2.098.087m-1.834-.904c1.235.093 2.433.093 3.667 0a24.469 24.469 0 0 0 1.832-3.168a23.916 23.916 0 0 0-1.832-3.168a23.877 23.877 0 0 0-3.667 0a23.743 23.743 0 0 0-1.832 3.168a24.82 24.82 0 0 0 1.832 3.168"
/>
</g>
</svg>
</div>
</div>
</div>
.sticky-wrap0{
height: 200vh;
background: lightpink;
}
.sticky-wrap{
height: 200vh;
background: lightgreen;
}
.sticky-content {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 65px;
overflow: hidden;
width: 100%;
height: calc(100vh - 65px);
}