Jump to content

Rodrigo last won the day on March 17 2019

Rodrigo had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Rodrigo

  1. Hi, I'm not very familiar with how the latest versions of Angular are bundled, so I'll guess that it uses webpack and perhaps you're bundling with a create app type-CLI. If that's the case, the culprit could be tree shaking. Please read this: https://greensock.com/docs/NPMUsage More specifically the tree shaking part (just scroll down a bit) and let us know how it goes. Happy Tweening!!
  2. Rodrigo

    talk about guage

    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!!
  3. 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!!
  4. 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!!!
  5. 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: https://codepen.io/rhernando/pen/Batoc 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: https://codepen.io/rhernando/pen/IiHgq Hopefully that helps you getting started. Happy Tweening!!
  6. 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!!
  7. 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!!! Maybe you should use React instead Kidding aside, working with Vue has been very fun and a great learning experience, it is in fact a great library.
  8. 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...
  9. 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!!
  10. @OSUblake, components... really??, that's your answer to everything, right??
  11. @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.
  12. 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.
  13. 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: 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!!!
  14. 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!!
  15. No problem, glad you solve it. Happy Tweening!!!
  16. 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 ) 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!!
  17. Yeah, I totally understand. This whole bundling-babel-ES2015+-webpack-loaders-plugins madness can make you wish to change your area of work some times, is quite a handful. This article from two years ago still reflects how convoluted some things have become: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
  18. 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!!!
  19. Sorry I made a mistake and can't edit the post, perhaps there is a small technical issue with the forums now. Here: Should say: Switch that to true and the timeline will be paused. Sorry about that.
  20. 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!!!
  21. 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!!
  22. 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: https://codepen.io/GreenSock/pen/OPqpRJ?editors=0010 Happy Tweening!!
  23. 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!!!
  24. 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 ): Try cleaning up your code a bit and go through those resources and let us know how it goes. Happy Tweening!!