CODEWITHSUNDEEP
javascriptsvggsap
The Old County
The Old County

Reputation: 109

SVG morphing on scroll javascript handling

enter image description here

Trying to recreate this javascript scrolling animation - responding to changes in scroll direction and morphing between different transitions

I want to replicate this in gsap -- this version shows the morph from triangle to circle -- but then needs to morph to rectangle to flatten the sides out

https://codepen.io/theoldcounty/pen/VYwYwGQ

// gsap.to()... infinity and beyond!
// To learn how to use GSAP, go to greensock.com/get-started

gsap.registerPlugin(ScrollTrigger);

var tl = gsap.timeline();
hippo = document.getElementById("hippo");

tl.to(
  hippo,
  {
    morphSVG: "#circle",
    duration: 1,
    scrollTrigger: {
      trigger: "#v-spacer-1",
      markers: false,
      scrub: true,
      start: "top top"
    }
  },
  "+=1"
);
@import url("https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap");
* {
  box-sizing: border-box;
}

body {
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
  margin: 0;
}
.v-spacer {
  height: 90vh;
  width: 100%;
  scroll-snap-align: center;
}

svg {
  display: block;
  width: 100vw;
  height: 100vh;
}

path {
  fill: linear-gradient(to right, #ff0000, #00ff00);
}

#svg2 {
  position: fixed;
}

#circle {
  visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CodePen - Gsap Scroll Morphing</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="Domestic_Dromedary_silhouette.svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="enable-background:new 9 80 800 400;" xml:space="preserve">
    <style type="text/css">
      .st1 {
        fill: black;
      }
    </style>

    <!--SHAPE #1-->
    <path id="circle" class="st1" d="M 0 0 A 1 1 0 0 0 1000 0" />

    <!--SHAPE #2-->
    <path id="hippo" class="st1" d="M 0 0 L 500 500 L 1000 0" />

    <div id="v-spacer-1" class="v-spacer">

    </div>
    <div id="v-spacer-2" class="v-spacer">

    </div>
    <!-- partial -->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/CSSRulePlugin.min.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
    <script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
    <script src="./script.js"></script>

</body>

</html>

Upvotes: 0

Views: 186

Answers (1)

blazgocompany
blazgocompany

Reputation: 23

https://codepen.io/BlazgoCompany/pen/OJeqNJR?editors=1010

I believe this is what you are looking for. Theres nothing to change in the CSS and JS but the HTML should be updated as per your needs:


 <!--SHAPE #1-->
   <path id="circle" class="st1" d="M490.1,280.649c0,44.459-36.041,80.5-80.5,80.5s-80.5-36.041-80.5-80.5s36.041-80.5,80.5-80.5
      S490.1,236.19,490.1,280.649z"/>
  
   <!--SHAPE #2-->
   <path id="square" class="st1" d="M 194 440 L 609 444 L 592 125 L 187 113 Z"/>

You can draw your first shape here, copy the path, and paste it into #circle then make another shape and paste it into #square

You can also change the ID's of your shapes based on what shape they are. Just make sure you also change the timeline:

tl.to("#shape-1-id", {
    morphSVG: "#shape-2-id",
    
    //...

  }, "+=1")

Upvotes: 0

Related Questions