Jump to content
Search Community

hellodude.it

Premium

  • Posts

    23

  • Joined

  • Last visited

 Content Type 

Posts posted by hellodude.it

    Goodfight.shop unusual slider with GSAP

    in GSAP

    Posted

    Hi,

    not really a question, but I made a slider (starting from Goodfight.shop) with GSAP (specifically ScrollTrigger). Since it's an unusual slider (I couldn't find a similar one to start with) I would like to share it with you and the community. 
    Maybe someone can also help me refine the code :)

     

    (I don't know why, but viewing from the codepen's iframe has problems, so I recommend viewing directly from codepen)

     

    Thanks,

    a.

     

    See the Pen yLPmomp by alssndr (@alssndr) on CodePen

    • Like 3

    InertiaPlugin and problem with overflow x

    in GSAP

    Posted

    Hi,
    I'm using InertiaPlugin to have draggable elements and it's great!
    The only problem I have is being able to have the image go out of bounds but not "move" the content of the site (see attached video).
    I noticed that if I set "overflow: clip" to the parent it works, while "overflow: hidden" doesn't solve the problem.
    Is there an alternative to "overflow: clip" as it has almost no compatibility?

     

    Thank you,

    a.

     

    MorphSVG malformed path problem

    in GSAP

    Posted

    10 hours ago, GreenSock said:

    Yeah, it looks like your markup is incorrect:  

    
<!-- BAD --> 
<div className="name name3">
  
<!-- GOOD --> 
<div class="name name3">

    (class, not className). 

    This is a code from a React app, so className is correct (sorry if i don't mention it before).

    MorphSVG malformed path problem

    in GSAP

    Posted

    Hi,

    i have a svg that I'm trying to morph and it throws the "ERROR: malformed path: #item3 .name3 path:nth-child(2)". 

      

    <div id="item3">
  <div>

   <div className="number"></div>

   <div className="name name3">
   
    <svg preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1370.69 168.39">
      <path d="M54.5,22.06H0V3.74H130.75V22.06H76.25V167.23H54.5Z"/>
      <path d="M215.05,0c51.1,0,77,40.52,77,84.19s-25.89,84.2-77,84.2-77-40.52-77-84.2S164,0,215.05,0Zm0,150.38c39.17,0,55.61-33.77,55.61-66.19S254.22,18,215.05,18s-55.6,33.77-55.6,66.18S175.88,150.38,215.05,150.38Z"/>
      <path d="M315.45,166.93V27.32h23.27V166.93Zm69.8-139.61H338.72V4.05h46.53Zm0,139.61V27.32h23.27V166.93ZM455.06,27.32H408.52V4.05h46.54Zm0,139.61V27.32h23.27V166.93Z"/>
      <path d="M520.82,120.39H497.55V50.58h23.27v69.81Zm0-69.81V27.32h23.27V50.58Zm23.27,93.08H520.82V120.39h23.27Zm69.8-116.34h-69.8V4.05h69.8ZM590.63,143.66h23.26v23.27h-69.8V143.66h46.54Zm46.53-93.08H613.89V27.32h23.27Zm-23.27,93.08V120.39h23.27v23.27Zm23.27-23.27V50.58h23.27v69.81Z"/>
      <path d="M756.87,22.06H702.38V3.74H833.13V22.06h-54.5V167.23H756.87Z"/>
      <path d="M866.88,120.39H843.61V50.58h23.27v69.81Zm0-69.81V27.32h23.27V50.58Zm23.27,93.08H866.88V120.39h23.27ZM960,27.32h-69.8V4.05H960ZM936.69,143.66H960v23.27h-69.8V143.66h46.54Zm46.53-93.08H960V27.32h23.27ZM960,143.66V120.39h23.27v23.27Zm23.27-23.27V50.58h23.27v69.81Z"/>
      <path d="M1025.44,3.74h29.77l51.52,137.39L1158.48,3.74h29.77V167.23h-20.61v-136h-.46l-51.06,136h-18.55l-51.06-136h-.46v136h-20.61Z"/>
      <path d="M1230.78,120.39h-23.27V50.58h23.27v69.81Zm0-69.81V27.32H1254V50.58ZM1254,143.66h-23.26V120.39H1254Zm69.81-116.34H1254V4.05h69.81Zm-23.27,116.34h23.27v23.27H1254V143.66h46.54Zm46.54-93.08h-23.27V27.32h23.27Zm-23.27,93.08V120.39h23.27v23.27Zm23.27-23.27V50.58h23.27v69.81Z"/>
    </svg>    
     
   </div>

  </div>
</div>

     

    Can someone please help me?

    Thank you,

    a.

     

    High CPU/GPU rate with SVG animation using GSAP

    in GSAP

    Posted

    Hi,

    I have a problem with a loop animation that causes an high CPU/GPU rate with Chome and a jerky effect with Safari.

     

    Here's my demo: https://www.dudemag.it/test/.

     

    Here's my code: 

    import React from 'react';
import gsap from 'gsap';

class App extends React.Component {

  componentDidMount() {

    var a = 0;
    var b = 0;

    for (var i = 1; i <= 18; i++) {

      a = i*90;
      b = i*90+360;

      gsap.timeline({ repeat: -1 })
        .set(this['menu_blob_' + i], { rotation: ('-' + a), xPercent: 200, yPercent: 0.01, rotation: a })
        .to(this['menu_blob_' + i], 5, { rotation: ('-' + b), xPercent: 200, yPercent: 0.01, rotation: b, ease: "none" });

    }

  }

  render() {

    return (

      <div>

        <svg className="blob_cont" ref={element => this.blob_cont = element}>

          <image xlinkHref="img/background.png" mask="url(#mask)" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
          
          <defs>
            <filter id="gooey" height="130%">
              <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur" />
              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
            </filter>
          </defs>
          
          <mask id="mask" x="0" y="0">
            <g style={{ filter: 'url(#gooey)' }}>
              <circle ref={element => this.menu_blob_1 = element} className="blob" cx="10%" cy="10%" r="80" />
              <circle ref={element => this.menu_blob_2 = element} className="blob" cx="50%" cy="10%" r="40" />
              <circle ref={element => this.menu_blob_3 = element} className="blob" cx="17%" cy="15%" r="70" />
              <circle ref={element => this.menu_blob_4 = element} className="blob" cx="90%" cy="20%" r="120" />
              <circle ref={element => this.menu_blob_5 = element} className="blob" cx="30%" cy="25%" r="30" />
              <circle ref={element => this.menu_blob_6 = element} className="blob" cx="50%" cy="60%" r="80" />
              <circle ref={element => this.menu_blob_7 = element} className="blob" cx="70%" cy="90%" r="10" />
              <circle ref={element => this.menu_blob_8 = element} className="blob" cx="90%" cy="60%" r="90" />
              <circle ref={element => this.menu_blob_9 = element} className="blob" cx="30%" cy="90%" r="80" />
              <circle ref={element => this.menu_blob_10 = element} className="blob" cx="10%" cy="10%" r="80" />
              <circle ref={element => this.menu_blob_11 = element} className="blob" cx="50%" cy="10%" r="20" />
              <circle ref={element => this.menu_blob_12 = element} className="blob" cx="17%" cy="15%" r="70" />
              <circle ref={element => this.menu_blob_13 = element} className="blob" cx="40%" cy="20%" r="120" />
              <circle ref={element => this.menu_blob_14 = element} className="blob" cx="30%" cy="25%" r="30" />
              <circle ref={element => this.menu_blob_15 = element} className="blob" cx="80%" cy="60%" r="80" />
              <circle ref={element => this.menu_blob_16 = element} className="blob" cx="17%" cy="10%" r="100" />
              <circle ref={element => this.menu_blob_17 = element} className="blob" cx="40%" cy="60%" r="90" />
              <circle ref={element => this.menu_blob_18 = element} className="blob" cx="10%" cy="50%" r="80" />
            </g>
          </mask>

        </svg>

      </div>
    );

  }

}

export default App;

     

    What's the problem? How can i solve this?

    Schermata 2020-03-14 alle 13.00.59.png

    Schermata 2020-03-14 alle 13.01.23.png

    How to use ScrollMagic and GSAP with React

    in GSAP

    Posted

    Hi,

    I have a problem using GSAP and ScrollMagic in React's project. This is an example:

      

    var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({ triggerElement: this.about }).setTween(TweenMax.to(this.h2, 0.25, { color: 'yellow' })).addTo(controller);

    Can you explain me why this operation executes at the start and not when this.about is triggered?

     


    Thank you,

    a.

    Problem with Razzle and GSAP

    in GSAP

    Posted

    5 minutes ago, OSUblake said:

    For SSR, you'll need to use the UMD/CommonJS files in the dist folder like this. There is no all.js file.

      

    
import { gsap } from "gsap/dist/gsap";
import { MotionPathPlugin } from "gsap/dist/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

     

     

    Thank you for the response. How can i import TweenMax and TimelineLite? There aren't in "dist" directory.

    Problem with Razzle and GSAP

    in GSAP

    Posted

    Hi,

    I found problems installing GSAP in a Razzle project. I think the problem is relative to SSR, because this is the only difference between a "create-react-app" and "create-razzle-app".

    When i do "npm start":

      

    /Users/alessandrobuoscio/dude_website_razzle/node_modules/gsap/all.js:1
import gsap from "./gsap-core.js";
       ^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:721:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.gsap/all (/Users/alessandrobuoscio/dude_website_razzle/external "gsap/all":1:1)
    at __webpack_require__ (/Users/alessandrobuoscio/dude_website_razzle/build/webpack:/webpack/bootstrap:685:1)
    at fn (/Users/alessandrobuoscio/dude_website_razzle/build/webpack:/webpack/bootstrap:59:1)

     

    How can i resolve this?

×
×
  • Create New...