Jump to content
Search Community

klyvoon

Premium

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Posts posted by klyvoon

    Import gsap in a js file

    in GSAP

    Posted

    Hi,

     

    I'm trying to use gsap but I can't properly import the gsap files ...

     

    Basically I just want to reproduce a fast simple example like there is in the gsap documentation "basic usage".

     

    I only got 3 files :

     

    Index.html 

    <!DOCTYPE html>
<html lang="en">
	<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>My Website</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="main.js"></script>
	</head>

	<body>
		<div class="box orange"></div>
 	</body>

</html>

    style.css 

    .box {
    display: block;
}
.orange {
    background-color: orange;
    width: 100px;
    height: 100px;
}

    main.js 

    import gsap from './gsap/dist/gsap';

gsap.to(".box", {duration: 2, x: 300});

     

    I followed the installation tutorial with npm, still it doesn't, I don't know what i'm missing...

    My root folder is composed of main.js / index.html / style.css / node_module folder.

     

    I'll be gratefull for any help, thx !

     

    Flip example - gsap.utils.toArray object relation

    in GSAP

    Posted

    Hey GSapers !! How are you ?!😃

     

    [EDIT] I can't put the example right away, it appears at the bottom 

     

    I'm deciphering this flip example : 

     

    Overall i get it, i could use it, no problem... But i'm curious about this piece of code inside the updateFilters() function : 

      

     const state = Flip.getState(items), // get the current state
        classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id),
        matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes;

    Here is the glitch : the "matches" const:

     

    "classes", extract among the "filters" GSAP array, the checked box from which it extract the id attributes. So far so good.

     

    "matches", when the ternary operator gets a truthy value, retrieves a GSAP array related to the "items" GSAP array?! What the hell is going on ?!😨

    When i console.log this stuff i get something like : 

      

    [<div class="item orange" data-flip-id="auto-2" style="display: inline-flex;"></div>,<div class="item orange" data-flip-id="auto-4" style="display: inline-flex;"></div>]

     

    I can't connect how it relates to the "items" GSAP array, since there's no reference to it in the "matches" const line ! 


    Thank you for reading !

     

     

     

    See the Pen NWRxarv by GreenSock (@GreenSock) on CodePen

    Insert text inside SVG polygon

    in GSAP

    Posted

    Hi, I'v been watching this forum for a month and i'm really impressed with all the features GSAP have ! You guys are great !

     

    I'v been trying to reproduce an animation inspired by this topic

     

     

    I could achieve some of it, but I have been stuck on the problem for some days.

    My goal is to have the text being simultaneously displayed as the morph's end. For instance as the yellow shape morphs.

    It's been like a Rubik's cube, whatever i change in the HTML or GSAP part, i end up with weird effects...

     

    My code so far :

     

    Any tips or guidance to how I can insert the text will be of great release ! Thank you !

     

     

    See the Pen 1d42d0846dfd7e31fd77464499235dad by klyvoon (@klyvoon) on CodePen

×
×
  • Create New...