Search the Community

Showing results for tags 'react'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 41 results

  1. 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!
  2. Hi team! I've been struggling for a while to get some conditional logic in place with my animations. Some quick backstory to give my codepen some context...Anyone who's curious can also see my two other threads, all related to the same project, but I thought I would make a new one with a greatly reduced example. There are LOTS of other questions about animating list items, but not many with react? And none that I've seen that involve potentially large amounts of data, or conditional logic mixed into the timeline? Backstory: I've built an interactive USA map using D3/react-simple-maps, it shows all of my companies bookings on a 5 minute delay...usually close to 50 at a time...100-150 an hour, about 8,000 in a day! That's a lot dots to show on a map! Thanks GSAP for your awesome timeline and stagger methods to make it more digestible. So...enter the 'ticker'... I decided in addition to the map I would add a sidebar that has a card with data on each booking, like who it is, the dollar amount etc. These cards appear in the ticker at the same time dots appear on the map. Now that we're live, everyone wants new features. "Wouldn't it be cool if there was a booking over a certain dollar amount, we could show a whale fly across the screen?" How do I that???? A couple of things, then some code! - Because these ticker cards contain lots of data, I do want them to pause in place for long enough that someone could read them if they wanted...after digging through forums and lots of codepen examples, the best I could come up with was multiple staggerFromTos chained together! It's pretty choppy but it works...ish. The one that is live has better timing than the the codepen! Also - no map in this example - just list items...and a cheeseburger callback! - I've been playing around with .add and .call, or adding a label somewhere to my timeline - not quite there yet! - Nothing I've done actually considers the data! In my codepen, I've created an array with id, and values, and I'm hoping if a card reaches the top of the box (or anywhere in the box) and has a value greater than 10, it will call the cheesburger animation to do its thing? Any ideas? what am I doing wrong? Where should this conditional logic live - within the function, or outside of the timeline somewhere...possible in componentDidMount or DidUpdate? - I'm still getting the hang of react and its ways...but our best practice is to use keys when going through an array with the .map() method, and use createRefs to set targets for the animation. Is there a way I can access a particular card by it's key or ref etc? https://stackblitz.com/edit/react-iiesig?embed=1&file=index.js Thanks!
  3. Hello Community - my second post as I'm very stuck trying to integrate a range-slider in React that will be friends with the progress() method to move through the timeline! I can pass around the value I need to my slider, but getting undefined errors when I try to pass this over to this.tl.progress(this.state.value) etc? I've read through several posts, but none look very current...in fact most are going back 2-3 years and the react-way has changed! Looking through the 'getting started with react post from Rodrigo' there are some useful hints, but it seems overly complex, compared to how easy it was to plugin the play, pause, reverse and restart methods into a button with an onClick event handler. Do we really need a separate state management file to pass down the state as props to a child component just to get the slider to move through the timeline without breaking? I also got some very good support already (This gives you more of an idea what I am working on...sorry for the lack of a reduced codepen example as this is a large full-stack application! coming soon I promise!) Here's some code of how I got the play, pause, reverse, and restart methods working...these plugged right in! (FYI ButtonGroup and Button components are from React-Bootstrap): <Row> <Col md={12}> <ButtonGroup className="animationControls"> <Button bsStyle="primary" onClick={() => this.tl.play()}> <Glyphicon glyph="play" /> {"Play"} </Button> <Button bsStyle="primary" onClick={() => this.tl.pause()}> <Glyphicon glyph="pause" /> {"Pause"} </Button> <Button bsStyle="primary" onClick={() => this.tl.reverse()}> <Glyphicon glyph="backward" /> {" Reverse"} </Button> <Button bsStyle="primary" onClick={() => this.tl.restart()}> <Glyphicon glyph="step-backward" /> {"Restart"} </Button> </ButtonGroup> </Col> </Row> Until bootstrap-4 is up and running with react, you do not have range slider in your form components, so I had to look elsewhere. After trying a few different versions, the npm package rc-slider seems to be the most lightweight (little to no boilerplate required!) create your styles for the slider before your class function: const railStyle = { position: "relative", width: "90%", margin: "0% 0% 0% 3%", height: 10, borderRadius: 7, cursor: "pointer", backgroundColor: "#afafaf" }; const handleStyle = { height: 15, width: 15, backgroundColor: "white", borderTopLeftRadius: 10, borderTopRightRadius: 10, border: "3px solid #E5F1FC", top: -2, position: "absolute" }; AND be sure to set your starting value in the constructor....probably 0 since that would be the start of your timeline.... constructor(props) { super(props); this.tl = new TimelineMax(); this.state = { center: [46.8, 8.3], zoom: 1, value: 0 }; this.handleZoomIn = this.handleZoomIn.bind(this); this.handleZoomOut = this.handleZoomOut.bind(this); this.handleReset = this.handleReset.bind(this); this.handleSliderChange = this.handleSliderChange.bind(this); } Next, I have two functions...please note that onSliderChange and onAfterChange are pre-built methods for the react rc-slider component. these successfuly track and log the value as you drag along the timeline, but kill the animation! onSliderChange = value => { this.setState({ value }); console.log("Value is: ", value); }; onAfterChange = value => { console.log(value); this.tl.progress(value / 100); }; .....And lastly, the slider component itself, inside render() <Slider className="slider" style={railStyle} handleStyle={handleStyle} min={0} max={bookingData.length} value={this.state.value} onChange={this.onSliderChange} //onInput={this.handleSliderChange} onAfterChange={this.onAfterChange} /> I know this may be hard to digest without a working example. I'll try to make a reduced case, but here's the issue...inside the Slider component, if you drag the slider around, it will successfully log the value I need. Where can I pass the value to this.tl.progress(this.state.value / 100) etc to get the timeline to respond? I've tried a dozen different ways, and I either get that value is undefined, or when I try to pass this in to the onSliderChange I get my fav error about expected a function, but instead saw an expression, no unused expressions. dragging the slider around kills the timeline, or depending where I do it, will make the animated elements disappear from the screen. Grrrrr! React is very powerful, but the need to constantly update the state of components during their lifecycle make these kinds of things very frustrating! If anyone has solved this or can send a link to an example of how to do this it would be greatly appreciated! If I figure it out on my own I will update the post - I know I'm close! Thanks community!
  4. Mahmoud16

    Jest, Enzyme and GSAP

    Hi all, Not sure if i'm missing something or if I'm doing something incorrect. But I'm trying to run simple unit tests with Jest and Enzyme on my component that uses gsap for a search input box. The component works perfectly fine, animation is great too. But whenever i run my tests, and specifically this line component.find('#close').'click' i get ERROR CANNOT TWEEN A NULL TARGET the close button calls this function below: animation.hideSearch(this.searchInput) animation.hideSearch is: hideSearch(target){ return TweenMax .to(target, duration, { opacity: 0, display: 'none' }) }, And finally here is my search input: <input id='search-input' className={styles.input} value={this.state.searchValue} onChange={this.handleSearch} ref={div => this.searchInput = div}/> Is there anything i need to configure in order to get jest to ignore the gsap animation? Any help is appreciated. thanks!
  5. Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?
  6. UnioninDesign

    staggering data from multiple arrays?

    Hello community - my first post! I discovered GSAP on Friday, got it working a few days later...mind=blown! I'd be happy to supply a codepen but have more a general/best practices question. My stack: React, D3...or rather, react-simple-maps npm package to use D3's map projections...and of course GSAP! My project: I'm a new front-end developer, hired as a data visualization analyst, and my first project is to build an interactive map to show bookings. with hundreds of bookings to render, it would be 'data overload' and lousy UI with hundreds of markers across the US all at the same time... I started racking my brain to try and find a way to map these out over a timeline to stagger the bookings...enter GSAP! Question: The map shows (first) the location of the customer who made the booking, our client's location, and a line connecting the two. I have a data object with nested client and customer data, looks something like this below. In order to generate map markers for both the client and the customer, I have already used .map to go through each array and create the marker. I have staggered the animations, but at runtime, all customers are rendered one at a time...then all clients are rendered one at a time, followed by all lines. Surely there's a way to to use the key to go by each bookingId and render the customer unique to that ID, then the client, and then animate a line connecting the two before applying that same animation to the next booking? My janky code for the animations (first-timer over here, go easy on me! lol) - I know the best practice in React is to use createRef instead of classeNames - will migrate soon! Likely to move this to a separate animation.js file and call the functions later in componentDidMount(). Happy to send more code examples and thanks! componentDidMount() { bookingInterval(); //Animations with GSAP const tl = new TimelineLite(); tl.staggerFrom( ".custMarkers", 1, { y: 500, cycle: { x: [-500, 500] }, ease: Power1.easeOut, opacity: 0.1, scale: 10 }, 0.5 ) .staggerFrom( ".clientMarkers", 1, { cycle: { x: [-500, 500] }, y: 500, ease: Power1.easeOut, opacity: 0.1, scale: 7 }, 0.5 ) .staggerFrom( ".lineAmation", 2, { y: 500, x: -500, ease: Power1.easeOut, opacity: 0.1, scale: 7, rotation: 360 }, 0.5 ); } Data: { BookingId: 123456, client: { ZipCode: 55555, coordinates: [-80.6998, 28.3716], clientName: "name of the client", }, customer: { ZipCode: 11111, coordinates: [-122.3122, 47.5838], location: "city, state" }, CreatedAt: "timestamp string" },
  7. espeigeltmsw

    tween 3D property "z" not taking effect

    I've been working on porting a shattering/explosion effect from vanilla js (https://codepen.io/elitmsw/pen/XomeQZ) to react. I think I have most everything working, but unfortunately the z property, which provides the explosion, doesn't take effect anymore. Both are using v2.0.2, and fiddle as I might, I can't seem to figure out why it won't work. I found I can simulate the z effect with a negative custom easing and moving the shatterFragmentRefs to the top and left, but it isn't really what I want. Any idea what might be blocking the z from kicking in? Notes for navigation: the timelines are located in the Explosion Component in componentDidUpdate Let me know if I'm leaving out any important info. Thank You, espeigeltmsw
  8. alex.w.brasileiro

    Animate pseudo-elements on React App

    Hi guys 😄 I tried to animate the ':: before' pseudo-element of a button in a React application with Styled-Components ... I know, it's a bit crazy 🤠 But, unfortunately, I did not have much success, here is my code .... import React, { Component } from 'react'; import styled from 'styled-components'; import { TweenLite, CSSPlugin, CSSRulePlugin } from 'gsap/all'; const ButtonElement = styled.button` width: 200px; height: 60px; border-radius: 30px; line-height: 60px; background: #F9AE32; color: #0D0F1B; font-size: 1.6rem; text-align: center; font-weight: 500; position: relative; ::before { content: ''; width: 100%; height: 100%; border-radius: 30px; background: #C18522; position: absolute; bottom: -38px; right: -178px; } `; export default class Button extends Component { animateMenuOpen = () => { let buttonElementBefore = CSSRulePlugin.getRule("button::before"); console.log('buttonElementBefore', buttonElementBefore); // return undefined // it doesn't work... TweenLite.to(buttonElementBefore, .400, { x: 500 }) } animateMenuClose = () => {} render() { return ( <ButtonElement ref={ref => this.buttonElement = ref} onMouseEnter={this.animateMenuOpen} onMouseLeave={this.animateMenuClose} >Button Text</ButtonElement> ) } } What am I missing here? 😢 I know that to animate with GSAP and React we need the ref, so I tried that way ... let buttonElementBefore = CSSRulePlugin.getRule(`${this.buttonElement}::before`); console.log('this.buttonElementBefore', this.buttonElementBefore); But, still did not work 😭 Thank you guys 🤓 Alex.
  9. Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as they move forward. What I think is a size animation, so they get bigger based on trigger points on the screen. But what the heck do I know?? Theres so much info out there I'm bamboozled. So what do you think - scrollmagic? gsap? Where do I even start yo?! Advice please!!!
  10. Dipscom

    GSAP with Create React App

    If you are someone like me and has ZERO experience with React, Facebook's Create React App, webpack and the sort, you might want to have a read about my adventures working in a live project here. As stated I'm working in a project that uses the Create React App - The idea is quite cool. They hide away the vast majority of the config and common files that end up being clutter when working on a simple project. The upside is that things are super simple and look really neat. The downside is that for someone who has no idea what one's doing, it's very confusing. I will try and put a little summary of what's happening so that my pain can be shared. Day 1: Read this post from cjke.7777 and digest it completely, it's full of very important and useful information. Don't include GSAP in your bundled files, there's really no reason for that. GSAP is hosted in a CDN, make use of it and all of its benefits. Pro Tip from OSUblake, you don't need to do anything else after including the CDN. No 'require', no 'include', nada. Gotcha 1 - The linter included in the Create React App will throw a hissy fit and fail to compile because TweenMax is a global variable. In their docs they suggest two options: 1) Creating a new variable directly from the window Object (please don't). 2) Adding a comment line for the linter to ignore (the lesser of the two evils, in my view). Your tween will end up something like: TweenMax.from(this.el, 1, { // eslint-disable-line autoAlpha:0, }); Don't worry about the 'this.el' bit, I'll explain it later. After all, I still need to finish this project in time. Bonus reading (Also from OSUblake): https://medium.com/@cheapsteak/hi-tadeouy-thank-you-for-the-kind-words-44dfc75190b8 https://medium.com/@cheapsteak/reusing-reacttransitiongroup-animations-with-higher-order-components-1e7043451f91 Just don't worry about using findDOMNode as cjke.7777 points out in his post.
  11. Hi, I am pretty new in GSAP and don't have a lot of exp. in react, so I am not 100% sure what is the main cause of this problem. Problem: I am trying to do a basic show/hide DOM element animation by clicking on buttons (one in parent App component, one inside of About section) and it works almost great. I would like that About section will be out of the viewport by default but after TweenMax.set(...) I still can see About section (I don't use CSS transform for default state). I saw examples and other topics on the forum but haven't found something like that so far. I also figured out that there is a workaround: put extra conditions in componentDidUpdate() method and replace all this.aboutSection refs by "id/data attribute/class name" (see code snippet). class App extends Component { constructor() { super(); this.state = { isOpenedAbout: false } } toggleAboutSection = () => { this.setState({isOpenedAbout: !this.state.isOpenedAbout}); }; render() { return ( <div> <About isOpenedAbout={this.state.isOpenedAbout} toggleAboutSection={this.toggleAboutSection} /> </div> ) } } class About extends Component { constructor() { super(); this.aboutSection = null; } componentDidMount() { console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light"> TweenMax.set(this.aboutSection, {xPercent: 100}); console.log('this.aboutSection', this.aboutSection); // in the browser console: <section class="about text-c-mercury-light" style="transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);"> } componentDidUpdate(prepProps) { if (this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 0, ease: Power4.easeInOut}); } else if (!this.props.isOpenedAbout && this.props.isOpenedAbout !== prepProps.isOpenedAbout) { TweenMax.to(this.aboutSection, .8, {xPercent: 100, ease: Power4.easeInOut}); } else { // workaround: if use id/dataAttribute/class instead of ref // TweenMax.set(this.aboutSection, {xPercent: 100}); } } clickCloseButton = () => { this.props.toggleAboutSection(); }; render() { return ( <div> <section ref={node => (this.aboutSection = node)} className="about text-c-mercury-light"> ... </section> </div> ); } };
  12. DraggableSock

    Draggable not working with React 16.5

    First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to point out that using GSAP 1.19.1 / 2.0.0 / 2.0.2 with React 16.4 and lower doesn't reproduce the issue, nor does it cause the onPress handler to be called twice. It only gets called once, with a PointerEvent. However, I was able to reproduce this issue using GSAP 1.19.1 / 2.0.0 / 2.0.2, with React 16.5. If there's anything more needed, I'll happily provide more details. componentDidMount() { const lis = document.getElementsByTagName('li'); Draggable.create(lis, { cursor: 'grab', onPress(event) { console.log(event); }, onDragEnd() { TweenMax.to(this.target, 0.5, { x: 0, y: 0 }); } }); } Thanks in advance!
  13. b0dg4n

    Draggable with create-react-app

    I am trying to get a div to rotate on drag using the Draggable api in a fresh create-react-appinstallation. I cannot seem to get it to rotate. Here is my App.js file: import React, { Component } from 'react'; import { Draggable } from 'gsap/all' class App extends Component { componentDidMount() { Draggable.create('.draggable', { type: 'rotation', onPress: function() { console.log('clicked'); }, }); } render() { return ( <div> <h2>React & GSAP Draggable</h2> <div className='draggable'>Drag and rotate me</div> </div> ); } } export default App; When I press the div, I can see the clicked log to console, but the div stays put when dragging. TweenMax works fine: TweenMax.to(target, 3, { color: 'red', })
  14. Hey there, I am trying to import the `ThrowProps` plugin from the bonus zip. In my file I need the plugin, I am importing this: import Draggable from 'gsap/Draggable' import '../assets/throwProps' then further down: componentDidMount() { const rotationSnap = 360 / 14 Draggable.create('#wheel', { type: 'rotation', throwProps: true, snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap }) } The wheel turns on drag, but there is not snap or inertia. Running this just like this I get the following error in terminal: Failed to compile../src/assets/throwProps.js Line 13: 'define' is not defined no-undef After adding `/* eslint-disable */` to the top of the plugin to stop it from complaining, I get this error: Failed to compile../src/assets/throwProps.js Module not found: Can't resolve '../TweenLite.min.js' in '.../src/assets' I then added this line at the top: import TweenLite from 'gsap/all' and changed require("../TweenLite.min.js") to require(TweenLite) After all this, the warning I get is this one: Compiled with warnings../src/assets/throwProps.js .250:54-72 Critical dependency: the request of a dependency is an expression Anyway, nowhere during this process did I manage to get the wheel to turn with inertia. I am fully aware I am either missing something or doing something wrong, but can't figure out what it is. Help 😯
  15. pizza0502

    How to make scrollTo += works in React?

    Hi, I'm trying to use scrollTo in React. But I can't make the increment value to works with scrollTo... Here is the function that not working: handleClick = () => { let incrementNumber = 500 TweenMax.to('content', 0.5, { scrollTo: { x:'+='+incrementNumber } }); } Here is the function that can works if I just use a fixed number, but like this I can make the scrollTo increase 500px every time I click it: handleClick = () => { TweenMax.to('content', 0.5, { scrollTo: { x:500} }); }
  16. I am trying to use GSAP with React. In React I am creating a component with some text animations, for which I would I would like to create several instances at runtime. The main component should look like this: import React, { Component } from 'react'; import './App.css'; import { TimelineMax, Bounce} from 'gsap'; import Title from './Title.js'; let mainTimeline; class App extends Component { componentDidMount() { setTimeout(this.animate, 1000); } componentWillUnmount() { mainTimeline.kill(); } animate = () => { mainTimeline = new TimelineMax({ id: 'Everything' }); const titleTimeLine = new TimelineMax({ id: 'Title' }); const titleTimeLine2 = new TimelineMax({ id: 'Title2' }); mainTimeline.addLabel('start'); // get external timelines titleTimeLine.add(this.title.timelineEnter); titleTimeLine2.add(this.title2.timelineEnter) mainTimeline .add(titleTimeLine, 'start') .addLabel("title2") .add(titleTimeLine2, 'title2') } render() { return ( <div className="App"> <Title text="The benefits are:" clipPathId="clipPath1" ref={(el) => { this.title = el; }}/> <Title text="This should work" clipPathId="clipPath2" ref={(el) => { this.title2 = el; }}/> </div> ); } } export default App; And the Tile component is: import React, { Component } from 'react'; import { TimelineMax, Power4, SlowMo} from 'gsap'; import './Title.css' class Title extends Component { constructor(props) { super(props); const { text, clipPathId } = this.props; } get timelineEnter() { const tl = new TimelineMax(); const duration = 1; tl.to(this.line, duration, {attr:{x1:120, x2:880}, ease:Power4.easeInOut}) .to([this.reveal, this.line], duration, {y:"+=120", ease:Power4.easeInOut}) .to(this.line, duration, {attr:{x1:500, x2:500}, ease:Power4.easeInOut}) .to(this.clipPathReveal, duration, {y: -180, scale: .3, transformOrigin:"50% 50%", ease:SlowMo.ease.config(0.7, 0.7, false)}) return tl; } render() { return ( <svg className="demo" viewBox="0 0 1000 500"> <defs> <clipPath id={this.props.clipPathId} ref={(el) => { this.theClipPath = el; }}> <rect ref={(el) => { this.reveal = el; }} x="0" y="-100" width="1000" height="250" fill="#000" /> </clipPath> </defs> <line ref={(el) => { this.line = el; }} x1="500" y1="150" x2="500" y2="150" strokeWidth="20" stroke="red"/> <g ref={(el) => { this.clipPathReveal = el; }} clipPath="url(#clipPath1)"> <text transform="translate(500 250)" fill="#3088Ef" textAnchor="middle" fontSize="80">{this.props.text}</text> </g> </svg> ); } } export default Title; The problem is that in the code: <g ref={(el) => { this.clipPathReveal = el; }} clipPath="url(#clipPath1)"> <text transform="translate(500 250)" fill="#3088Ef" textAnchor="middle" fontSize="80">{this.props.text}</text> </g> for the clipPath attribute, I need to pass a dynamic URL. Otherwise, it doesn't work correctly. Is there a way to pass a dynamic id to the URL in clipPath="url(#clipPath1)". Something like clipPath="url({dynamicURL})" or something? In the first instance of <Title>, it should produce clipPath="url(#clipPath1)", while in the second it should be clipPath="url(#clipPath2)" and so on.
  17. Hi guys. Just wondering if it would be possible to use GSAP for animating simple page transitions in React? I have my index.js file rendering my app: // React Common Modules import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import Reducer from './Reducers/Reducer'; const loggerMiddleware = createLogger(); const createStoreWithMiddleware = applyMiddleware( thunkMiddleware, // Middleware for dispatch() loggerMiddleware // Middleware for loging )(createStore); let store = createStoreWithMiddleware(Reducer); // Main SCSS import './index.scss'; // Root React Component import App from './App'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') ); Then I have my app.js // React Common Modules import React, { Component } from "react"; // React Router import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import { TransitionGroup, CSSTransition } from 'react-transition-group' import 'gsap/TweenLite' import 'gsap/CSSPlugin' import 'gsap/EasePack' import 'gsap/TimelineLite' // Own Modules import { DefaultPage } from "./Pages/"; import { AboutPage } from "./Pages/"; class App extends Component { constructor(props) { super(props); } render() { return ( <TransitionGroup> <CSSTransition key={location.key} classNames='fade' timeout={1000}> <Switch location={this.props.location}> <Route exact path='/' component={DefaultPage} /> <Route exact path='/about' component={AboutPage} /> </Switch> </CSSTransition> </TransitionGroup> ); } } export default App; And then I have a SideMenu component with all my <Link> 's. Everything is working fine, I just can't get it to create a transition in between the routes, which is where I'd like to use GSAP. The timeout simply doesn't work. Here's the scenario I'm trying to accomplish: User is on the Landing Page Clicks /about link Color slides in from the left and covers the entire screen (using GSAP) while the landing page is still there beneath the color. The landing page leaves behind the color. The color slides out. About page is revealed. Does anyone know how to do this? Thanks!
  18. env828

    Simple Example of GSAP with React

    0down votefavorite I am pretty new to GSAP and like using it so far, however, I have a question on how to do some relatively simple animations with react.js involved. I have two divs and an arrow in the middle. What I want is when a div is clicked the arrow will animate and move under the div that is clicked. And if the other div is clicked then the arrow will move under that div. I feel like this is easily done with HTML/CSS but incorporating it into react has been difficult. Any help is greatly appreciated coming from a entry-level coder.
  19. I am trying to set up some concentric circles that are draggable/rotatable, and I'm trying to set it up on <g> tags because there are going to be some smaller SVGs that need to rotate around as if they were attached to the large color bands. I read the pinned SVG gotchas thread, and although it doesn't mention <g> tags, it's clear that it should work because it works here: Some notes about my codesandbox demo: I had some issues trying to use TweenLite by including gsap as a dependency and using a regular import, so I commented out the imports and added CDN links to TweenMax and Draggable in index.html. Clearly Draggable is loaded and works because I also made an extra draggable div just to make sure. The ultimate behavior I am looking to get is that the concentric bands should be rotating infinitely. If a user clicks on one of the bands, the rotation stops and the band becomes draggable. Once the user clicks on a different band, the rotation starts up again. There are two sections of code that are commented out right now, but if you uncomment them you will see the rotation animation/pausing behavior working. The part that's eluding me is the draggability. All the important stuff is happening in the BaseBand.jsx file. Any pointers on how to get draggable rotation working on an SVG <g> tag would be very welcome.
  20. I am experimenting with these title animations https://github.com/bigfanjs/react-titles and I want to sequence some titles. The questions that I have are: How can I pause or play the original animations? How can I sequence the animations (for each title)? - For example, play the first one, wait for .7 seconds and play the second one, etc. How can I set the initial position of each title? My code is: Here is the code I have: import React, { Component, Fragment } from "react"; import styled from "styled-components"; import * as titles from "react-titles"; import { TimelineMax, Power3 } from "gsap"; const mytitles = [ { component: "Title2", title: "This is ", subTitle: "Sweet", isOpen: false, size: 100, x: '50' }, { component: "Title6", title: "Let' see", subTitle: "if this works", isOpen: false, size: 400, x: '400' }, ] class Title extends Component { constructor(){ super(); this.renderTitle = this.renderTitle.bind(this); this.restartHandler = this.restartHandler.bind(this); this.tl = new TimelineMax({paused: true}); } state = { isOpen: false } restartHandler(){ const {tl} = this; tl.reversed( !tl.reversed() ); } componentDidMount(){ const {tl} = this; mytitles.forEach( (e,i) => { //tl.set(this.refs[e.component], {left:e.x, top:e.x}) tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } getComponent(e) { const ATitle = titles[e.component]; //ATitle.handleRest(); //const {t1} = this; //this.tl.set(this.refs[e.component], {left:e.x, top:e.x}) return( <div className="box" key={e.component} ref={e.component} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } renderTitle(e,i){ return( this.getComponent(e) ); } handleComplete = (status) => { /*const {selected, component} = this.state; if (!status && selected !== component) { this.setState({ component: selected, isOpen: true }); }*/ } render() { return( <div> <button onClick={this.restartHandler}>Toggle Tween</button> <div> {mytitles.map(this.renderTitle)} </div> </div> ) } } export default Title;
  21. Arnav13

    Svg Won't animate in React Component

    Recently was trying to replicate the above codepen in a react component with gsap and the animation completely fails, it doesn't even start or trigger. Can someone help me look for bugs? The codesandbox link is here : https://codesandbox.io/s/402ov4lyr7 Please Help.
  22. I'm hovering on a div with mousover/mouseout handlers. hoveron/hoveroff runs just fine... but.. hovering back on... forces it to stick so that hoverOff is never triggered. I feel like I've seen this before, but I can't tell where. I'd really appreciate any help on this. Many thanks in advance! Sincerely, Beau link to video handleMenuHoverOn(arg) { const {tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 0.15, { x: btn.hoverPos }, '-=0' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 1 }, '-=.5' ) }); } handleMenuHoverOff(arg) { const { tl, refs } = this; BtnDB.btns.forEach((btn, idx) => { tl.to( refs[`dot-${btn.id}`], 1, { x: 0 }, '1' ); tl.to( refs[`text-${btn.id}`], 0.5, { opacity: 0 }, '-=.5' ); });
  23. Hi folks, i moved my first steps in the Green Sock world and i find it amazing Thanks a lot for all the goodies. I'm trying to develop a card game in react and i've read a lot of resources in the forum to know how match React+GSAP and i think i get it (in particular i love this) I don't really have a GSAP related question, it's more an abstract question on how to correctly implement the whole flow of my app because i'm getting stuck in the animation part. I posted the question in stack overflow HERE but i would love to hear some impressions by the forum experts because typically they give wonderful hints If you feel this post does not belong to this forum feel free to delete it, thanks anyway.
  24. Hello GSAP community, I am trying to play 2 timelines one after the other. when timeline 1 finishes, immediately play timeline 2. After lots of trying and reading the forum, I still haven't found a solution yet. My problem is when I get some panels open and I click on the menu button, I want the open panels to slide back then immediately animating all the panel to go offscreen So far I need to click twice on the menu button for this to happen I am using a master timeline, as i understand is the way to do such things. what do I do wrong in the master timeline? why are the timelines not chaining? Sorry the code is a bit messy but I’ll work on refactoring soon, however, any tips will be welcome Thanks a lot
  25. dadiaar

    Problems bundling with Rekit

    Hello everyone. I have been trying to use MorphSVGPlugin for the last 24 hours and I don't fine my way out. I'm writing a react App, using rekit which is based on create-react-app. It includes Babel, Webpack 3 for bundling, React hot loader for hot module replacement and so on. So following other threads from this forum, I installed gsap by npm and then copied the membership plugins for npm users into node_modules/gsap, and then I can write import { TweenLite, TweenMax, MorphSVGPlugin } from 'gsap' ... TweenMax.to("#start", 0.5, {morphSVG:"#end"}) When I try to use it I get "invalid morphSVG tween value: #end" From what I've read it means MorphSVGPlugin is actually not added. To confirm I tried: console.log(TweenLite) console.log(TweenMax) console.log(MorphSVGPlugin) An only the last one shows undefined The problem I think it's that MorphSVGPlugin is marked as unused and not added to bundle.js. As I'm not familiar with the bundling process, I've trying to Google how to change the webpack config file or forcing the compiler to add it, but no luck so far. I hosted it in https://s3.amazonaws.com/gsap-forum/index.html just for reference, but I think it's not necessary. Can you please help? Thanks in advance. build.js package.json