Rodrigo last won the day on November 30

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Content Count

    1,654
  • Joined

  • Last visited

  • Days Won

    151

Everything posted by Rodrigo

  1. Rodrigo

    animate pulse by distance

    Hi, Is not very easy to get an idea of what exactly you want to do (for me at least), without a live sample to test and modify. Please try to provide a codepen sample using this base for the Morph SVG Plugin: Based on what you've posted the first idea that comes to my mind is using the mouse position to update the timeScale property of a TweenMax instance (in order to use the repeat: -1 and yoyo properties of that particular class): https://greensock.com/docs/TweenMax/timeScale() Here is an approximation of an element in the center of the screen (using flex) with an endless pulse animation. The animation's timescale is updated on the mouse move event attached to the document: Hopefully this is enough to get you started. Happy tweening!!
  2. Rodrigo

    TweenMax in Loop - Delay Issue

    Hi, Is not completely clear to me what you're trying to do here. You want to delay the animation of the x position but not the text or you want different delays for the text and the position?. Something like short delay for the text and long delay for the x position tween?. Please clarify this in order to understand correctly what you're trying to do and how to solve the issue. Happy Tweening!!
  3. Rodrigo

    TweenMax in Loop - Delay Issue

    Agreed, is necessary some sample code to get the real issue you're facing. In the mean time here is a simple example of using GSAP in a for loop changing a the string in a PIXI text instance: Also the issue in your code could stem from the fact that you're adding the onStart callback inside the pixi:{} config object, note that I don't use the pixi wrapper in this case, since I'm not tweening any PIXI related property, just updating the text. Try removing the onStart callback out of the pixi config object, try again and let us know how it goes. Happy Tweening!!!
  4. Rodrigo

    Thoughts on how to do this with React/GSAP

    Hi Rick, Well, actually passing anything between sibling components or up the chain in React and Vue is a bit complex actually, that's why you can rely on Redux, MobX and VueX. If you're starting with React, I think that @OSUblake's approach is the best. Is simple and works in the way you expect. Right now my recommendation would be to get more familiar and comfortable with React and then move onto using Redux for more complex tasks and when your apps need to observe changes in the app's state. In that case you could use redux observable, but as I mentioned, it would be better to start with the basics of redux and then move into more advanced stuff. You can watch this free course by Dan Abramov (creator of Redux and part of the React team) about getting started with React and Redux: https://egghead.io/courses/getting-started-with-redux Also this article by Lin Clark is very good as well: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 Happy Tweening!!!
  5. Rodrigo

    Infinite Carousel with Draggable

    Hi, Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:
  6. Rodrigo

    Import ModifiersPlugin Webpack

    Hi, Without more info about other libraries/frameworks you're using, my guess is that you're using webpack or a CLI that uses webpack for the build process. So perhaps this has to do with tree shaking: https://greensock.com/docs/NPMUsage Scroll down a bit and you'll find the tree shaking part. If this doesn't help, please provide more details about what you're doing, your setup and perhaps a reduced live sample or a setup file to take a look in our local environments for testing. Happy Tweening!!
  7. Rodrigo

    onUpdate vs Ticker

  8. Rodrigo

    Animate pseudo-elements on React App

    Hi and welcome to the GreenSock forums. Just use the componentDidMount method (careful now with calling them hooks, it can create a bit of a confusion ) and also remember that the CSS Rule needs to be wrapped in the cssRule: {} configuration object: componentDidMount() { console.log( this.button ); const rule = CSSRulePlugin.getRule(".element:before"); console.log( rule ); TweenLite.to( rule, 1, { cssRule: { bottom: 0 }, delay: 1 }); } I know that the norm is to use the refs for to get the DOM node, but keep in mind that pseudo elements are not DOM elements (as far as I know at least but I could be wrong about it), so there is no way to get the pseudo element the react-way soto speak. My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance. This sample seems to work: https://stackblitz.com/edit/gsap-react-pseudo-element-tween?file=index.js Hope that it helps you in some way. Happy Tweening!!!
  9. Well, that really looks nice!!! Great job Beau!!!
  10. Rodrigo

    Block Reveal Effect with GreenSock

  11. Rodrigo

    Block Reveal Effect with GreenSock

    Mhhh.... seems to work here: https://stackblitz.com/edit/block-reveal-effect-with-greensock-17645 Perhaps there was a momentary issue with the bundling process
  12. Rodrigo

    Block Reveal Effect with GreenSock

    Well @Sahil is spot on (that's why He is a superstar around here ). The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this: componentDidMount(){ const loaderContainer = document.querySelector("#loader-container"); const loader = document.querySelector("#loader"); this.tl .to(loader, 1, { y: -250, delay: 0.3 }) .to(loaderContainer, 0.2, { alpha: 0, display: "none" }; } I would create a reference in the constructor: constructor(props){ super(props); this.loaderContainer = null; this.loader = null; } Then in the render method use the ref callback: render(){ return <div> <div ref={ e => this.loaderContainer = e }> <div ref={ e => this.loader = e }> </div> </div </div>; } Finally in the component did mount method: componentDidMount(){ this.tl .to(this.loader, 1, { y: -250, delay: 0.3 }) .to(this.loaderContainer, 0.2, { alpha: 0, display: "none" }; } But beyond that small detail just do what @Sahil is doing and you'll be fine. Happy Tweening!!
  13. Rodrigo

    ScrollToPlugin not working in production build

    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!!
  14. 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!!
  15. Rodrigo

    Pendulum effect rotation Reverse

    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!!
  16. Rodrigo

    Is this possible with Green Sock and Scroll Magic

    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!!!
  17. Rodrigo

    Is this possible with Green Sock and Scroll Magic

    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!!
  18. 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!!
  19. Rodrigo

    accessing element in vue

    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.
  20. Rodrigo

    accessing element in vue

    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...
  21. Rodrigo

    timeline won't pause (nor pause() or paused(true)

    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!!
  22. Rodrigo

    accessing element in vue

    @OSUblake, components... really??, that's your answer to everything, right??
  23. Rodrigo

    timeline won't pause (nor pause() or paused(true)

    @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.
  24. Rodrigo

    timeline won't pause (nor pause() or paused(true)

    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.
  25. Rodrigo

    accessing element in vue

    So it is on..??