Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About Gilbert

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @Shrug ¯\_(ツ)_/¯ Thanks. That's what I was looking for.
  2. I would like to know whether or not there are methods in GSAP to animate perspectives. In the codepen I am using a js library call perspective transform. Is there something equivalent on GSAP that besides allowing to edit the 4 points manually allows to animate them? Or how to use this library to animate those points with GSAP
  3. @chrisgannon, thanks for the detailed explanation. I also came from Flash (Flex) and I was doing mainly visualization stuff. After Flash I learned D3 and I was doing lots of experiments with Edge Animate. Now, I am exploring what I can do to combine video with animation overlays with GSAP. (on my free time)
  4. Hi Shrug. yeah, I read the post. However, after so many years maybe others have some ideas of to achieve that with new techniques and tools, and of course, GSAP has evolved as well.
  5. Hi Zach. I agree. But he didn't say how he built it. So, I wanted to get some ideas from the forum on how to do something like that.
  6. In this video, Chris Gannon shows how he uses a motion tracker based on GSAP (this is from 2014). Any pointers on how to achieve something like this?
  7. hi @Shaun Gorneau, Thanks a lot. That works
  8. Let's say I have this animation: tl.to('.video-react-video', {left: '-=325px', duration: 1, ease: "back.out(2.5)"}, 9); How can I replace left: '-=325px' with left: '-=someVar' I tried creating a variable as const someVar = '325px'; and then use it as tl.to('.video-react-video', {left: '-=someVar', duration: 1, ease: "back.out(2.5)"}, 9); but it doesn't work. What would be the right syntax?
  9. Hi Rodrigo, Thanks. That didn't work, but this did work: <g ref={(el) => { this.clipPathReveal = el; }} clipPath={`url(#${this.props.clipPathId})`}> Your suggestion showed me the way
  10. 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 TimelineMa
  11. Rodrigo, Thanks a lot for your help. You are the BEST!!!
  12. 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-