Rodrigo last won the day on October 29

Rodrigo had the most liked content!

Rodrigo

Moderators
  • Content Count

    1,646
  • Joined

  • Last visited

  • Days Won

    150

Rodrigo last won the day on October 29

Rodrigo had the most liked content!

Community Reputation

2,193 Superhero

6 Followers

About Rodrigo

  • Rank
    Advanced Member

Contact Methods

  • Skype
    r_hernando

Profile Information

  • Gender
    Male
  • Location
    Santiago - Chile

Recent Profile Visitors

21,051 profile views
  1. Well, that really looks nice!!! Great job Beau!!!
  2. Rodrigo

    Block Reveal Effect with GreenSock

  3. 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
  4. 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!!
  5. 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!!
  6. 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!!
  7. 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!!
  8. 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!!!
  9. 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!!
  10. 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!!
  11. 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.
  12. 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...
  13. 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!!
  14. Rodrigo

    accessing element in vue

    @OSUblake, components... really??, that's your answer to everything, right??
  15. 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.