Jump to content


  • Posts

  • Joined

  • Last visited

About klyvoon

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

klyvoon's Achievements

  1. I can't make it work, and dont find anything in the console that could give me a hint... edit : I got it ! it works ! thank you so much !!
  2. I'm using raw HTML/CSS/JS.
  3. I just unzip the downloaded file and put it in the rootfolder then i type the NPM commands in visual studio code.
  4. 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 !
  5. I think, I totally misunderstood the "gsap.utils.toArray" function. What I now understand is that it looks for any selector text in the DOM, and as it finds a match, it will extract the entire element where the selector text is. Thank you for the reply !
  6. 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 : https://codepen.io/GreenSock/pen/NWRxarv 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 !
  7. Great !! I achieved the desired result thank to your guidance ! https://codepen.io/klyvoon/pen/xxYBjaB/1d42d0846dfd7e31fd77464499235dad Can't wait to learn more !
  8. 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 : https://codepen.io/klyvoon/pen/xxYBjaB/1d42d0846dfd7e31fd77464499235dad Any tips or guidance to how I can insert the text will be of great release ! Thank you !