Katie Nolan

Oh gosh I wrote '==' instead of '=' and that is why the ease 'none' wasn't setting. Guess I haven't had enough coffee today ? Thanks so much for the help!

Sorry but I do have vars.ease = "none" inside my code as far as I can tell. Or am I misunderstanding something? Please see the code snippet I posed below. It is also in my pen as well inside the method rollText. rollText(targets, vars, reverse){ const tl = gsap.timeline({ repeat: -1, onStart(){ console.log('START'); //<-- fires }, onComplete(){ console.log('FIRE COMPLETE') //<-- does not fire }, onReverseComplete(){ console.log('FIRE REVERSE COMPLETE'); //<-- does not fire this.totalTime(this.rawTime() + this.duration() * 10); } }); vars = vars || {}; vars.ease || (vars.ease == "none"); // <-----HERE IS THE EASE gsap.utils.toArray(targets).forEach(el => { let clone = el.cloneNode(true); el.parentNode.appendChild(clone); gsap.set(clone, {position: "absolute", top: el.offsetTop, left: el.offsetLeft + (reverse ? -el.offsetWidth : el.offsetWidth)}); tl.to([el, clone], {xPercent: reverse ? 100 : -100, ...vars}, 0); }); return tl; }

Hi @OSUblake thanks for the help but my pen does not have an ease on it ( see line 56 ) and the text is scrolling (unless we are seeing something differently?). Thank you for pointing out the error in this.direction . It was left over from when I was trying to resolve why onComplete is not firing. I fixed that error, but unfortunately onComplete is still not firing when the timeline completes. I'm trying to make the marquee match what GreenSock did in the example I posted above, only in Vue instead of vanilla js. It's not supposed to stop at the end and restart, like my pen does, but go on forever.

Hello! I am trying to recreate a scrolling marquee inside of a Vue Component that is extremely similar to the marquee shown below here. I have been trying to debug the issue but I find myself stuck. It looks like onReverseComplete is not firing causing the playhead to stop when the animation completes (instead of scrolling infinitely). I tried and onComplete does not seem to be firing either, only onStart, although from the docs/example it looks like I am using both correctly? Could Vue be causing the issue or am I overlooking something? I'm still getting the hang of things. Any help or insight would be very much appreciated - thanks!

Ah you were totally right! That is so obvious now that I think about it It's good to know that tweens just overwrite the old ones. I've got the animation working and can keep on tinkering. Thanks a bunch!

Hello! I have been trying to follow the GSAP/React tutorial here and I have checked the other forum posts but I'm just not having any luck. I'd like to have a small div follow/replace the cursor on my screen. On mousemove of the parent component - the e.clientX and e.clientY values are passed down as props to the child component New Cursor. I set up the constructor and lifecycle functions like in the tutorial, but my replacement cursor isn't animating. If I pass a regular number as a prop it works, but it seems that something about e.ClientX and e.ClientY are preventing things from animating. I'm extremely new to React so I really appreciate any patience/help. Thank you! Also here is the parent component if that helps: import React from 'react'; import Header from '../components/Header'; import NewCursor from '../components/NewCursor'; import { css } from '@emotion/core'; class NewCursorLayout extends React.Component{ constructor(props) { super(props); this.state = { x: '', y: '', }; } _onMouseMove = (e) =>{ this.setState({ x: e.clientX, y: e.clientY }); } componentWillUnmount(){ const lastX = this.state.x; const lastY = this.state.y localStorage.setItem("x", lastX); localStorage.setItem("y", lastY); } render(){ const { x, y } = this.state; const { children } = this.props; return( <> <div onMouseMove={this._onMouseMove.bind(this)} css={css` border: 1px solid red; height: 100vh; width: 100vw; max-width: 100%; `}> <NewCursor top={y} left={x}/> <Header /> <main css={css` width: 100%; max-width: 800px; margin: 0 auto; border: 2px solid pink; `}> <h3>New Cursor Layout</h3> {children} </main> </div> </> ) } }; export default NewCursorLayout;