Jump to content
GreenSock

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

Search the Community

Showing results for tags 'gatsby'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 13 results

  1. I'm having some really frustrating issues with getting the production build version of a scrollTrigger component to work correctly. I'm hoping that I'm just misunderstanding something fundamental but reading through the comments here none of the fixes have worked. It works as expected in the dev build, but when pushing to netlify for the staging build it jumps at the start of the pin, and then there is a bunch of empty margin space at the bottom and it overshoots. Here is the basic code. It's a simple side nav bar that is supposed to simply pin and scrub to the bottom. I would lov
  2. Hi, i am just getting to know gsap and i have a little problem :/. I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out. const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const menuBtn = useRef(null) const tl = useRef() const toggleOpen = () => { setIsOpen(!isOpen) } useEffect(() => { const nav = menuRef.current
  3. Hello, I have made replica of my code to show the issue that I am having. https://codesandbox.io/s/strange-firefly-5mtce?file=/src/App.js Do not mind the mask not being in the center for that is not the problem.. When resizing the window from desktop TO mobile, the `<a>TESTING</a>` does not appear. when i inspect it with the dev tools it shows `opacity: 0;` I am trying to disable all scrollTriggers and timelines when mobile. Any help would be gladly appreciated. THANKS
  4. Hi everyone, I've successfully built with GSAP and Gatsby before, but not with the DrawSVGPlugin. It's throwing this error: This seems to be a Gatsby build problem as it works fine with React. Any ideas? Any suggestions would be hugely appreciated. I've referenced the plugins like so: const gsapPlugins = [DrawSVG, CSSPlugin, TweenLite] Thanks, Matt
  5. Recently, I created gatsby project and I wanted to implement show animation to a card component. The problem comes when my 'react-intersection-observer' detects when a card appears on a screen. Then gsap gives me warning with content: 'Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()' instead of animating my card component. I've already read many topics about this issue. I've tried to use 'gsap.registerPlugin()' function or to put 'CSSPlugin' to 'const plugins' but they don't solve the issue. I see the same issue when I use properties like: 'opacity' ins
  6. Hi. I'm quite new to GSAP and Gatsby (first time using gatsby and second time with GSAP), GSAP is quite buggy with me. Sometimes animations trigger, sometimes not. I followed the NPM usage guide you put on this site, except this step, which might or might not be the problem but I want to exhaust all options before I ask for further help: I'm sorry if this is not GSAP specific. I just want to understand the above code segment so I can know how to translate it properly in Gatsby's config. Transpilers, Bundlers, Webpack, Babel still confuse the heck out of me since I'
  7. I'm trying to build and deploy my project in Gatsby but can't figure out how to solve this problem. Error seems to be made by ScrollTrigger. I tried to fire animation in if (window) statement as well as if (document) but it also generates error. Does anyone know what should I fix?
  8. Hi, I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. Here is my website (try it on mobile to understand what I mean): https://tbdalen.github.io/ And here is my repo: https://github.com/tbdalen/tbdalen.github.io Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though: https://dpotfer
  9. Hi, I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks! https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js
  10. kempo

    React Gatsby

    I'm trying to get GSAP working in my React Gatsby project. I've made a simple test following @Rodrigo guide https://greensock.com/react Here is my component - no animation and no errors either import { TweenLite } from "gsap/TweenLite"; class Messages extends React.Component { constructor(props) { super(props); this.myElement = null; this.myTween = null; } componentDidMount() { this.myTween = TweenLite.to(this.myElement, 1, { x: 100, y: 100 }); } render() { return ( <div ref={div => (this.myElement = div)}> <img
  11. Hi there, First post here! I'm working on a React/Gatsby app which references this tutorial. I've solved most of the issues except for the following error: TypeError: Cannot read property 'easeOut' of undefined I've tried a bunch of variations of imports destructuring etc but Quad is never defined. My code is as follows: import React, { Component } from "react" import Layout from "../components/layout" import SEO from "../components/seo" import { TweenMax, Quad, Sine, Back } from "gsap/TweenMax" const prettyLetter = require( 'pretty-let
  12. I've been a long time user of GSAP and have used the SplitText plugin on many projects. I've been learning React and more specifically the Gatsby library and have run into an issue I cannot solve. I setup this SplitText in my Gatsby project and it worked fine - then all of a sudden today it broke giving me a Type Error. I've downloaded the most recent GSAP library and Gatsby/ React is up to date as well. TypeError: null is not an object (evaluating 'parent.insertBefore') (I know this code below is partial - I ripped out a lot of excess code) import React, {
  13. Hello The People of Greensock, I've been working with a static site generator for react lately - Gatsby.js. One of the components has a menu animation attached. In development the animation works just fine, but when deployed it just doesn't trigger. Code is bundled and minified with webpack. The weird thing is, GSAP loads up properly, the console is clear, no errors. It's hard to investigate more since code after minification and bundling is hard to read in chrome dev tools. :/ I'm not sure if this is related to my GSAP setup, but if anyone coul
×