danboyle8637

Sorry... let's try this one: https://codesandbox.io/s/184vowy7mj?fontsize=14

Okay. I have been staring at this for a day now and it's possible I'm so fried I'm missing something... but... I'm using these toggles in a form to turn on and off certain questions. The form works and the toggles work but I can't get their animations to work. I linked to a CodeSandbox with a little example. In this example... I can toggle the switch on... but it won't reverse. I feel like I'm misusing Greensock someway. Below is also my SVG component in my actual website. I have commented out some code, but when I try to set the timeline in my initial useEffect call... and then I try to play or reverse it based on the click... nothing happens. If I put in console.log statements into the click handler... they are called correctly. If I just put in a TweenMax call into the click handler... the switches animate correctly. What am I missing? Here's the code and thanks! import React, { useRef, useEffect } from "react" import { TimelineMax, Power2, TweenMax } from "gsap" import { useFormStore } from "../context/FormContext" const FormToggleSwitch = ({ width, height, className, handleWebsiteClick, name, }) => { const [formState, dispatch] = useFormStore() const toggleSwitchRef = useRef(null) const tl = new TimelineMax({ paused: true }) useEffect(() => { tl.add( TweenMax.fromTo( toggleSwitchRef.current, 0.6, { x: 0, fill: "#F96666", }, { x: 36, ease: Power2.easeInOut, fill: "#54ba5e", } ), 0 ) }, []) if (formState.haveWebsite && name === "websiteToggle") { //console.log("go to green") tl.play() // TweenMax.to(toggleSwitchRef.current, 0.6, { // x: 36, // ease: Power2.easeInOut, // fill: "#54ba5e", // }) } else { tl.reverse() } if (formState.haveTimeline && name === "timelineToggle") { // console.log("go to red") tl.play() // TweenMax.to(toggleSwitchRef.current, 0.6, { // x: 0, // ease: Power2.easeInOut, // fill: "#F96666", // }) } else { tl.reverse() } return ( <svg id="toggle-switch" xmlns="http://www.w3.org/2000/svg" className={className} width={width} height={height} viewBox="0 0 70 34.48" onClick={handleWebsiteClick} > <g id="body"> <path d="M22.57 38a16.24 16.24 0 0 1 0-32.48h35.52a16.24 16.24 0 0 1 0 32.48z" transform="translate(-5.33 -4.54)" fill="#ebebeb" /> <path d="M58.09 6.54a15.24 15.24 0 0 1 0 30.48H22.57a15.24 15.24 0 0 1 0-30.48h35.52m0-2H22.57A17.24 17.24 0 0 0 5.33 21.78 17.24 17.24 0 0 0 22.57 39h35.52a17.24 17.24 0 0 0 17.24-17.22A17.24 17.24 0 0 0 58.09 4.54z" transform="translate(-5.33 -4.54)" fill="#d7d7d7" /> </g> <circle ref={toggleSwitchRef} cx="17.07" cy="17.24" r="12.93" fill="#f96666" id="switch" /> </svg> ) } export default FormToggleSwitch

@GreenSock Cool... I did do that... but can I ask why you wrapped it in in array? I still can't get it working but I'll make a codesandbox in the next couple days. Thanks for your help!

import React, { useEffect, useRef } from "react" import { TimelineMax, TweenMax } from "gsap" import MorphSVGPlugin from "../greensock/MorphSVGPlugin" import { useMenuOpenStore } from "../context/MenuOpenContext" const MenuIcon = ({ width, height, className }) => { // My state so I know when the menu is open and closed const [{ menuOpen }, dispatch] = useMenuOpenStore() // Initiallized timelinemax const tl = new TimelineMax({ paused: true }) // Setup refs to access the paths const topMenuBarRef = useRef(null) const middleMenuBarRef = useRef(null) const bottomMenuBarRef = useRef(null) const rightCloseRef = useRef(null) const leftCloseRef = useRef(null) useEffect(() => { tl.to(middleMenuBarRef.current, 0.3, { x: -60, autoAlpha: 0, }) .to(topMenuBarRef.current, 0.3, { morphSVG: leftCloseRef.current, }) .to(bottomMenuBarRef.current, 0.3, { morphSVG: rightCloseRef.current, }) }, []) useEffect(() => { if (menuOpen) { console.log("play") tl.play() } else { console.log("reverse") tl.reverse() } }) return ( <svg xmlns="http://www.w3.org/2000/svg" className={className} width={width} height={height} viewBox="0 0 194.27 162.68" > <g id="close-menu-icon" fill="#fff" stroke="#ebebeb" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="24" > <path ref={rightCloseRef} id="right-cross" d="M28 150.68l59.83-59.83L166.68 12" /> <path ref={leftCloseRef} id="left-cross" d="M166.68 150.68l-59.83-59.83L28 12" /> </g> <g id="menu-icon" fill="#ebebeb" stroke="#ebebeb" strokeLinecap="round" strokeMiterlimit="10" strokeWidth="24" > <path ref={topMenuBarRef} id="top-menu-bar" d="M12 31.57h169.93" /> <path ref={middleMenuBarRef} id="middle-menu-bar" d="M71.95 81.28h110.32" /> <path ref={bottomMenuBarRef} id="bottom-menu-bar" d="M38.38 131h143.89" /> </g> </svg> ) } export default MenuIcon This is my component. It's a standalone SVG that changes based on my menu being open or closed. I don't use morphSVG in setting up the timeline. I import morphSVG based on the files location in my project. But I don't know how to get my app to know about it because it's not being used. Not sure if I need to do something with webpack.

I'll upload a pen, but I feel like this might be something obvious I'm missing. I am building a react project using all hooks. In the past, when I used a class component, I would do something like this... import MorphSVGPlugin from '../src/greensock/MorphSVGPlugin' constructor(props) { super(props) this.morphSVG = MorphSVGPlugin } Then I would use the morphSVG: property in my Tween vars object and it was all good. But with hooks, there is no constructor function. And just assigning the morphsvg plugin to an used variable doesn't help. I'm using useEffect (only run on component mounting) to setup my morphing tween. Any ideas?

Thanks guys! That did get rid of the error. I will do my next one with just the tl.staggerTo()... Thanks!

I do run a function to revert the SplitText after the animation is complete. Here's my code... useEffect(() => { const splitMobile = new SplitText(wordRef.current, { type: "chars" }) const tl = new TimelineMax({ delay: 0.4 }) const revertSplitMobile = () => splitMobile.revert() tl.add( TweenMax.staggerFrom( splitMobile.chars, 0.4, { opacity: 0, scale: 0.6, y: 20, ease: Power2.easeOut, }, 0.05 ) ) tl.add( TweenMax.staggerTo( splitMobile.chars, 0.2, { color: "#6471BF", scale: 1.08, ease: Power2.easeIn, }, 0.05 ), "-=0.5" ) tl.add( TweenMax.staggerTo( splitMobile.chars, 0.2, { color: "#383838", scale: 1, ease: Power2.easeOut, }, 0.05, "-=0.1" ) ) tl.add(revertSplitMobile) tl.play() }, []}

I setup a TimelineMax sequence using SplitText... awesome by the way. Loving the SplitText. But after my animations run, I am getting this error in my console. Any ideas? Oh... I'm building in React using Gatsbyjs... just in case.

@Rick May Congrats on figuring it out. It's so frustrating when you're stuck but each time you figure it out... it feels so good and you learn so much. I am going to try some cool animations with a site I'm working on now. I'm sure I'll get cornered for sure.

@Rick May I'm not the total expert... yet... but I noticed you excluding all of /gsap/ from webpack. If you look at the code I used, I only told Webpack to ignore (I'm not sure if that's the right word) the throwpropsplugin because it was using _doc which is only available on the window... and window is not available on the server because there is no window. What error message were you getting specifically? If it had something to do with the throwpropsplugin... I would replace /gsap/ with /ThrowPropsPlugin/ and everything should work. Try that and see what happens.

@Fivetwelve So here's what I did... exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === 'build-html') { actions.setWebpackConfig({ module: { rules: [ { test: /ThrowPropsPlugin/, use: loaders.null(), }, ], }, }) } } I put this in my gatsby-node.js file. This tells webpack to ignore it... at least as far as I know. I'm no webpack expert... yet! But I don't get any warnings or build fails anymore. I have not tried to rebuild since the updated plugin. I'll try that this weekend. I am currently hosting my site using Netlify and my site builds fine every time. My throwprops work great. I hope this can be of help. If I learn anything new, I'll report back here. I am starting to build a new site in the next week so I will be tackling many of these issues looking for better solutions if possible.

@GreenSock That helped perfectly thanks. I was just thinking about it in the wrong way. I have it fixed and working.

I have a draggable row where three cards (divs) are rendered. When my app renders, everything works great. But my draggable always shows the middle card first. Is there a way I can tell draggable to start at a certain position? Let me know if I need to create an example in Code Sandbox or something. Thanks!

Sorry for the crazy uploads... the uploader said they failed... guess not. I did get webpack to ignore this file... so I'm assuming it's definitely because _doc is undefined since document doesn't exist on the server. I think.

I am building a GatsbyJS site which is essentially a React site that builds out to static files. In my build process, I am getting an error in my ThrowPropsPlugin.js The specific error is: WebpackError: TypeError: Cannot read property 'defaultView' of undefined Here's a screenshot of the part of code... In the actual file... this code is under the VelocityTracker section. I'm guessing this error is happening because on the server side, the document doesn't exist and _doc is undefined. Is that thought correct? Does anybody have experience with building with GatsbyJS? or how I can skip out of my Greensock plugin files during the build process? Thanks!

Thanks! I'll have to update.

@Rodrigo Wow thank you so much. I appreciate your help so much. When I read it, I remembered reading about the dragClickables at one point in time. But in my research over the last few days, it never popped back up. I will look into this more... mainly in the dev tools which I need to learn better. But thank you again for helping fix this issue and hopefully portals will change soon. I am still on React 16.7 something and not the newest version of 16.8 something. Maybe it has been fixed. I'll test it out on my next site which I'll be starting this coming weekend. I'll report back because this is functionality that I think makes the most sense for mobile devices. Thank you again!

I used codesandbox because I'm a little more familiar with this than codepen... at least when it comes to using React in it. Here is the URL to my little project: https://codesandbox.io/embed/l53n2yr619?fontsize=14 In the file: DraggableSchedule.js I created a Draggable container which holds three cards and they are flexed out so they are side by side. In Drawer.js I'm wrapping my DraggableSchedule in the actual drawer (portal) that will come from the right of the screen. In DrawerPortal.js I create my portal. And then in MenuSection.js I have the button that toggles the side menu open and close. The Drawer.js is wrapped in the Portal. This is a recreate from an app I building now. And no matter what I do, I can't get my Draggable container in the portal to respond to drags... clicks... anything. To get the bounds, I think I need to get the Drawer.js element... the drawer div that slides out. But I don't know how to do that and pass it down to DraggableSchedule.js where I can set the bounds and then calculate the width so I can configure my snap points. I've been racking my brain for two days now and have made no progress. I can get my Draggable plugin to work perfectly in my app as long as it's not in a portal. Any help or ideas would be great. Thanks so much!

Thanks! I'm excited to learn more and more about using Greensock, especially with React. I'm going to have to figure out how best to get the section of my project on CodePen I guess. The "node" is part of React Transition which helps you animate whole components since as far as I know, you can't put a ref on a functional component. I have been trying a couple ideas but just going crazy. It's my goal to make some docs for react users! I'll report back soon!

Just signed up for Club Green and excited to learn all the member plugins. I am building a site using Gatsby (React) and I'm adding all the bells and whistles... So I'm a little confused about how these plugins work in React. I have TweenMax working like a charm and Draggable (base) too. Here is my screenshot: I imported MorphSVGPlugin like the NPM docs say. It's in my project. I initially used: TweenMax.to(node, 0.3, { rotation: '-90', morphSVG: <CloseMenuIcon />, onComplete: done }) But my error said to use the convertToPath method. When I do what my screenshot shows, I get an error saying it can't .toLowerCase() undefined... and it shows that it's looking for the tagName. As I understand, this method takes the element itself or a string (tagName) I my React (Gatsby) project, all of my SVGs are components themselves that return the SVG element. So I'm confused about how to use the plugin correctly since I can't get a reference to the CloseMenuIcon SVG that's not in my HamburgerMenuIcon file. I appreciate the help!