Jump to content
GreenSock

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

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Posts

    1,768
  • Joined

  • Last visited

  • Days Won

    158

Posts posted by Rodrigo

  1. Hi and Welcome to the GreenSock forums.

     

    Unfortunately is not very clear (to me at least) what you're trying to achieve.

     

    Please take a look at this in order to create a reduced sample of your issue or an approximation of what you have in mind so we can better help you:

     

     

    Happy Tweening!!

    • Like 6
  2. 40 minutes ago, jonForum said:

    Did you know if is there a official or good un-official discord or slack community for greensock ?

     

    Not that I'm aware of. The best community are the forums actually.

     

    Normally everyone tries really hard to help users as fast as possible (as @Sahil just did) and we always do it with a friendly touch. Don't be afraid of asking GSAP related questions here, that's the whole reason for the forums. Also there are not stupid questions around here, this is definitely not StackOverflow where you'll get down-voted for your questions. So if you have questions, just post them here.

     

    Finally keep in mind that there are over 52,000 posts here, so do a detailed search, because there is a good chance that whatever you're struggling with, has been answered already, like you just did of course ;) 

     

    Happy Tweening!!

    • Like 6
  3. Absolutely!!!, either a TimelineLite or a TimelineMax will do the trick, just create a container with an overflow hidden property and use flexbox for center it in the viewport and then create a dummy element and trigger a draggable instance anywhere in that container to update it's progress.

     

    If possible create a simple example of what you have in order to get a better idea of what you're trying to do.

     

    In the mean time here are some resources about using the Timeline classes:

     

    https://greensock.com/sequence-video

     

    https://greensock.com/position-parameter

     

    Also take a look at this in order to create a reduced codepen demo:

     

     

    Happy Tweening!!!

    • Like 4
  4. If you're trying to replicate just the menu, I don't know if using ScrollMagic is the best approach, or at least the one I'd use.

     

    Instead I'll recommend to use Draggable and ThrowProps plugin to control the animation. Here is a very simple example of controlling the progress of an animation using Draggable:

     

    See the Pen Batoc by rhernando (@rhernando) on CodePen

     

    Also keep in mind that Draggable has a trigger property that allows you to update the target element by using the pointer/click event somewhere else. In this sample you can move the blue square by dragging anywhere in the grey area:

     

    See the Pen IiHgq by rhernando (@rhernando) on CodePen

     

    Hopefully that helps you getting started.

     

    Happy Tweening!!

    • Like 5
  5. Hi and welcome to the GreenSock forums.

     

    The issue is that you are using a timeline which is active. When you hover the the circle it turns into an elephant. The timeline starts and the it keeps running. Then you move the pointer out of the elephant shape. At that point you're adding another instance to the timeline, 0.1 seconds after the end of the last instance, which is the circle morphing into an elephant, but at that moment the timeline's playhead is passed that point so you don't see the elephant going back to a circle.

     

    I would recommend you using a single TweenLite instance and then the play and reverse methods. Also if you want to speed the reverse process, you can use https://greensock.com/docs/TweenLite/timeScale() as well. This code seems to do what you're looking for:

     

    var elephant = $("#elephant");
    var circle = $("#circle");
    
    var t = TweenLite.to(circle, 1, {
      morphSVG: "#elephant",
      paused: true
    });
    
    function toElephant() {
      // timescale 1 returns the tween to it's original speed
      t.timeScale(1).play();
    }
    function toCircle() {
      // timescale 3 makes the tween 3 times faster
      t.timeScale(3).reverse();
    }
    
    $("#circle").hover(
      function() {
        toElephant();
      },
      function() {
        toCircle();
      }
    );

     

    Happy Tweening!!

    • Like 4
    • Thanks 1
  6. Actually my idea was to go with React, but considering the size and how the app was constructed, Vue turned out to be a better solution, just that.

     

    It is a German thing actually: Jawohl!!! ;) 

     

    40 minutes ago, Dipscom said:

    And where are those teams? I look left, right and center for Vue contracts and all I see is React

     

    Maybe you should use React instead :D 

     

    acEGnCV.gif

     

    Kidding aside, working with Vue has been very fun and a great learning experience, it is in fact a great library.

    • Like 1
  7. On 10/30/2018 at 11:50 AM, OSUblake said:

    Use the platform. Do you even know what web components are? I'm honestly asking because it seems that there is a lot of incorrect information out there.

     

    Indeed. Haven't used them a lot though. I'm far more familiar with the specifics that each library uses to create reusable components. Indeed it would be awesome to create a single component and use it in different set-ups but right now everyone seems to be on board with opinionated software. Can you imagine a world without opinionated software?:

     

    https://imgur.com/ywOpPB7

     

    My original comment had an intended pun. You posted a link where they show tests and support for almost every known library and framework for web components, hence: "That's your answer to everything". Obviously that sounded funny only in my brain. I'll restrain myself in the future about those comments.

     

    @Dipscom

     

    Funny thing one: I made a component using ES6 modules and classes a few months ago that now needed to be transformed to a Vue component. Originally the idea was to transform the whole app to a React app, but the development team opted for Vue at the end.

     

    Funny thing two: I got a taste of my own medicine by @OSUblake, at the end you harvest what you seed... :D

     

     

     

    • Like 1
  8. As Blake mentions, when creating timelines in React, always use the componentDidMount hook, because that is run only once in the component's lifecycle, thus creating the animation only once and after all the elements have been added to the DOM and the component has been rendered.

     

    It seems to work as intended with the changes Blake pointed out:

     

    https://stackblitz.com/edit/react-timeline-pause-flow?file=Sun.js

     

    Also there is this sample from the GSAP-React guide:

     

    https://stackblitz.com/edit/gsap-react-timeline-sequence

     

    Happy Tweening!!

    • Like 5
  9. @flowen There are components you're importing into the sample that are not present in the folder structure of your sample:

     

    import Title from './Title'
    import Description from './Description'
    import NameDrawn from './NameDrawn'
    import Sun from './Sun'

     

    Stackblitz is returning an error during compiling:

     

    Import error, can't find files:
    ./Title
    ./Description
    ./NameDrawn
    ./Sun

     

    Please add those components and also the logs in order to see what's happening.

    • Like 3
  10. This might be somewhere else in your app.

     

    Can you create a simplified sample in https://stackblitz.com/ using just the sun component and all it's dependencies. It seems that you're not passing any props to it, so it shouldn't be a problem. Don't worry about the Morph SVG plugin, just use any other property like x, y, rotation, etc, so you don't expose your club member's plugin.

     

    The main point is to find out what is happening in the component did mount hook and how the intersection observer package is working with the child being passed, because in theory your code looks good and it should work as it is in the codepen sample.

    • Like 6
  11. Hi Beau,

     

    First thing I can say is that I don't like to add stuff to elements prototypes unless is necessary, but that is just me and my two cents about it. In your case I don't think is necessary, again just my humble opinion about it.

     

    Regarding your app I'd like to know if you want to animate all your elements or just some. If you want to animate all your elements, then the code you have is not working because you're not shuffling your array, you're simply getting a random index on each iteration, but at some point you could get the same index more than once. Normally when I have to do something like that I use this code:

     

    // this is the array
    const a = [101, 102, 103, 104, 105, 106, 107, 108, 109, 110];
    
    const used = [];
    
    const getOne = arr => {
    	let selected = Math.floor( Math.random() * arr.length );
    	
        // if the selected index is in the used array
        // try a new one until we get a non-used
    	while( used.indexOf(selected) > -1 ) {
    		selected = Math.floor( Math.random() * arr.length );
    	}
    	// add the new index to the used array
    	used.push(selected);
    	
    	return selected;
    };
    
    a.forEach( () => {
    	console.log( a[getOne(a)] );
    });

     

    That's the reason for this:

     

    Quote

    The randomized `-=${randInt(12, 30)}`   –for example, seems to cause unexpected behavior (one or more elements "appear" and/or slow down mid-stream)

     

    Right now since some of the elements are getting selected twice or more, there are two or more tweens in the timeline that affect the same element, so GSAP is overwriting the first tween and then executing the second one, which creates the sensation of the element slowing down, when in fact the element just started a new tween, as long as the previous, but in a shorter distance. Creating an iteration that takes every element in the array only once would remove that issue.

     

    The rest of the code to create the random numbers seems ok with me.

     

    Finally in terms of React, avoid using string refs since they are considered legacy and will be removed from a future version.

     

    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

     

    Happy Tweening!!!

    • Like 3
  12. Hi and welcome to the GreenSock forums.

     

    Vue works in a similar fashion as React, so perhaps your best choice should be to control the animation based on a state property that can be shared through components via props or through a store using Vuex.

     

    I haven't played a lot with Vue but there is this common is that you're supposed to update the DOM representation of the app using state, so I would try that approach.

     

    Also take a look at this article:

     

    https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a

     

    Finally see if you can use the native transition API from Vue to animate your component. This is highly similar to React Transition Group and both are based on ng-animate from Angular:

     

    https://vuejs.org/v2/guide/transitions.html

     

    Happy Tweening!!

    • Like 5
  13. Hey Bogdan,

     

    Perhaps this is about Tree Shaking in the production mode of Create React App, when it ejects all the code. Please see this and try creating a reference for the plugin to se if that helps, scroll a little bit and you'll see the tree shaking part):

     

    https://greensock.com/docs/NPMUsage

     

    Also normally when I hide stuff at runtime and then show them using GSAP (since there is no other way actually :D ) I use autoAlpha, which is a combination of visibility plus opacity, so I start with this in the CSS:
     

    .my-class {
      opacity: 0;
      visibility: hidden;
    }

     

    And then:

     

    TweenLite.set(myElement, { autoAlpha: 1 });

     

    Give tree shaking a try and let us know how it goes.

     

    Happy Tweening!!

    • Like 5
  14. Have you tried Create React App. That seems to be the most popular React generator and they just released a new version this week.

     

    They do have a polyfill for IE 9 - 11:

     

    https://facebook.github.io/create-react-app/docs/supported-browsers-features

     

    Perhaps Gatsby also has a polyfill for IE as well.

     

    Honestly I can't tell you about this. I just don't like app generators since they tend to bloat things. I prefer to bake my own start-up packages for my apps.

     

    Happy Tweening!!!

    • Like 1
  15. Sorry I made a mistake and can't edit the post, perhaps there is a small technical issue with the forums now.

     

    Here: 

    2 minutes ago, Rodrigo said:

    Switch that to false and the timeline will be paused.

     

    Should say:

     

    Switch that to true and the timeline will be paused.

     

    Sorry about that.

    • Like 1
  16. Hi Rick,

     

    First in your code, the Timeline is not paused:

     

    // this timeline is active after being instantiated
    this.theTween = new TimelineLite({ paused: false })

     

    Switch that to false and the timeline will be paused.

     

    If you want to wait for the image to be loaded, what I would do is wait for the onload callback of the native image API and start the animation then. Something like this:

     

    class App extends Component {
      constructor(props) {
        super(props);
        this.animateMe = null;
        this.theTween = null;
        this.preLoadedImage = null;
      }
    
      componentDidMount() {
        this.theTween = new TimelineLite({ paused: true })
          .to(this.animateMe, 1, {
            x: 100,
            y: 500
          });
        this.preLoadedImage.onload = () => {
          console.log("image loaded")
          this.theTween.play();
        }
      }
    
      render() {
        return (
          <div>
            <div ref={div => (this.animateMe = div)}>
              Animate me after everything has loaded
            </div>
            <div>
              <img src="http://placekitten.com/4322/1220" ref={img => this.preLoadedImage = img} />
            </div>
          </div>
        );
      }
    }

     

    Also you can use this tool:

     

    https://www.npmjs.com/package/react-preload

     

    Happy tweening!!!

  17. Hi and welcome to the GreenSock forums.

     

    This seems to be something related to other parts of your code and not GSAP-related.

     

    What I can see in IE 11 is this error:

     

    Unhandled promise rejection TypeError: Object doesn't support this action

     

    I did a quick google search and this seems to be originated in a promise you're writing somewhere in your code without a .catch() method or a try-catch using async/await, as this is reported in Babel, React, Vue and some other repos as well, so is not exclusive of React and definitely not something about the GSAP part of your code.

     

    Check some of this reports, do a search of your own and let us know how it goes:

     

    https://stackoverflow.com/questions/50476994/unhandled-promise-rejection-syntaxerror-internet-explorer

     

    https://github.com/babel/babel/issues/8111

     

    https://github.com/facebook/create-react-app/issues/2856

     

    Happy tweening!!

    • Like 3
  18. Hi and welcome to the GreenSock forums.

     

    As far as I know there is no Motion Blur Plugin for GSAP, unless a new plugin was released and I didn't even heard about it ;) 

     

    This issue is most related with the hardware than anything else. I'm pretty sure that with a last generation quad core machine with some solid GPU this wouldn't be a problem, while with a mid-range phone is more noticeable.

     

    The main solution for this is make your animation shorter. If that is not an option you can use WebGL to render the image and animate it's scale:

     

    http://www.pixijs.com/

     

    GSAP has a PIXI plugin, so you can use that to easily animate the scale of a PIXI Sprite, although the scale of a PIXI display object can be animated directly with TweenLite, without the use of the plugin:

     

    const mySprite = new PIXI.Sprite.fromImage("path/to/your/image.jpg");
    
    TweenLite.to(mySprite, 10, {scale: 2});

     

    Finally I'm curious of why you're using force3D: false in your pen, it should be true in order to send the layer to the GPU and perhaps get a better result:

     

    TweenMax.fromTo("#img", 10, {
      transformOrigin:'50% 50%', scale:1
    }, {
      scale: 2, ease: Power2.easeInOut, force3D:true
    });

     

    I've done a few things in PIXI, including long, full-screen image animations with very good results, so perhaps you can give it a try. Here you can find some examples to get you started:

     

    https://pixijs.io/examples/#/basics/basic.js

     

    Finally if you want to try the bonus plugins in CodePen here you can find the links to use them:

     

    See the Pen OPqpRJ?editors=0010 by GreenSock (@GreenSock) on CodePen

     

    Happy Tweening!!

    • Like 6
    • Thanks 1
  19. I would create just one function for the request that takes the url and returns the axios promise. Then handle that promise on each component. Just a couple of extra lines in each component is not going to turn your app into spaghetti code.

     

    IMHO you are over-complicating things with this approach and is resulting in React-related issues. A parent state update shouldn't, in any case, result in a child component being mounted again, unless that is specifically the case. In your app it doesn't seem to be what you're trying to do (unless I'm mistaken), so this app structure is backfiring at you.

     

    Just my two cents ;)

     

    Happy tweening!!!

    • Like 1
  20. Hi,

     

    I'm seeing two issues here. First your conditional logic is never truthy:

     

      componentDidUpdate(prepProps) {
        // this always comes back as false, regardless of the value
        if (this.props.isOpenedAbout !== prepProps.isOpenedAbout) {
          // this block of the code is never reached
        }
      }

     

    This basically has to do with the fact that your component is not re-rendered everytime the parent's state is updated. In fact is re-mounted, so everytime the state is updated, the child component is re-mounted, so the previous props is always equal to the current, because there is no change at all.

     

    I'm not an expert in HOC, in fact I try to avoid them as much as possible, so I can't help you regarding that. For re-usable components or re-usable code try always composition over inheritance, or instead of using HOC try extending a previously created component or just pass props or child elements to the component you're using as base.

     

    Ideally I'd like to know what you're trying to achieve, so I can understand why you're using HOC in this case. In particular, why you need to fetch data in two different components?. If you need two different sets of data just create a helper function that accepts the parameters each request needs and use that on each component. Honestly unless you need to use extremely different setups on each request, I don't see the need of that. Also if you're going to use the data of home and about always in your app, you can use Axios, and use async/await or a Promise.all() method to get all the data in the main component and then pass that data as a prop to each child component:

     

    https://github.com/axios/axios

     

    Here are a couple of links, for React's docs about composition vs inheritance:

     

    https://reactjs.org/docs/composition-vs-inheritance.html

     

    And this crazy guy's explanation about the principle of composition vs inheritance in Javascript (well actually He's not crazy... I think :D ):

     

     

    Try cleaning up your code a bit and go through those resources and let us know how it goes.

     

    Happy Tweening!!

    • Like 4
×