Jump to content
Search Community

klyvoon

Premium

  • Posts

    9

  • Joined

  • Last visited

 Content Type 

Everything posted by klyvoon

  1. klyvoon
    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. klyvoon
    I'm using raw HTML/CSS/JS.
  3. klyvoon
    I just unzip the downloaded file and put it in the rootfolder then i type the NPM commands in visual studio code.
  4. klyvoon
    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. klyvoon
    Great explanation, thank you !
  6. klyvoon
    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 !
  7. klyvoon
    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 !
  8. klyvoon
    Great !! I achieved the desired result thank to your guidance ! https://codepen.io/klyvoon/pen/xxYBjaB/1d42d0846dfd7e31fd77464499235dad Can't wait to learn more !
  9. klyvoon
    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 !
×
×
  • Create New...