hellodude.it

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.

Hi, can someone please help me?

Hi, thanks for the reply. I adjust the codepen by adding hidden overflow to the container but nothing changed. I am using Chrome macOS, here's a video:

Hi, my purpose is to have a ScrollTrigger on a scrollable div but i can't solve the bounce effect on scroll. I wrote a simple code for this (the problem is quite clear from the codepen). Can you guys help me to solve this problem? Thank you, a.

Ok, i understand. Thank you!

Yeah, sort of. The only problem with this codepen is that the draggable images have to go over all the content in the Y axis, whereas now they go overflow-y hidden.

Sorry and here's another demo: https://codepen.io/_alssndr/pen/gOLoLqo (Almost every instruction in this code is critical to the goal of the site)

It seems that "autoScroll: true" cause the issue. I need this function to drag the element across the page. Is there any way to make "autoScroll: true" only work on the Y axis and not the X axis? Thank you!

No, for this project it is not ok to keep the image inside of the bounds of the parent. My goal is for the image to overflow but not to "move" the remaining content.

I updated the codepen to better represent my problem. Try dragging the element when it is already in overflow, dragging it from its left side. https://codepen.io/_alssndr/pen/mdOqxwz

Sorry but the solution works in the codepen but not in the final code. Can you explain the logic of this intervention? So maybe by understanding it I can adapt the reasoning on the final site.

Here it is:https://codepen.io/_alssndr/pen/mdOqxwz

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. drag_problem.mp4

It works! How can i use this for production purpose? I need this for a client's project ? Thank you, a.

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

Hi, here's the a CodePen demo: https://codepen.io/_alssndr/pen/mdEeqdP

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.

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?

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.

Ok, now it works. Thank you!

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

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?