Sahil last won the day on January 15

Sahil had the most liked content!

Sahil

Moderators
  • Content count

    487
  • Joined

  • Last visited

  • Days Won

    25

Everything posted by Sahil

  1. How can I create this effect using GSAP?

    Here is demo with ScrollMagic. It has really easy learning curve depending on your experience with GSAP. Link to video tutorials: https://www.youtube.com/watch?v=QpedXxC0e5o&list=PLkEZWD8wbltnyDKWAgQfRDP_l0BC-zlU- Link to examples page with enough examples to do almost everything: http://scrollmagic.io/examples/basic/responsive_duration.html Though ScrollMagic is getting out of date so you may want to look for other methods and libraries, following thread discusses different approaches.
  2. How can I create this effect using GSAP?

    You want those divs to move up and down and have them fade in/out or you want to scroll the page and whichever div is in view should be opaque and others start fading out as they scroll out of view?
  3. Most of it was straight forward, just had to create draggable slider and do same thing with it as jQuery slider.
  4. Need a little help...

    Check this thread.
  5. GSAP & Canvas - for loop overwrites tweens

    Thanks Blake. That's interesting, don't know why I never tried changing canvas height/width using CSS.
  6. GSAP & Canvas - for loop overwrites tweens

    Something like this.
  7. GSAP & Canvas - for loop overwrites tweens

    It was because you were updating canvas height n width on every frame, though I don't know why it should cause the issue. I also changed the implementation, so instead of using for loop I am using delayedCall and looping through one element at a time.
  8. Business Green plugins with Angular / NPM

    @jorma Thanks. That solved it.
  9. GUI for GreenSock

    Not really. There are few projects which don't look practical for web. Then there are few which looked promising but died before getting famous and one which was most promising died before ever coming out as beta.
  10. Help for Sync Draggable, TL & Click

    Ya sure though you no longer need gsTransform because I went ahead and updated demo. Now I am maintaining a variable $target, and using it to calculate end values when responding to clicks. Also updating this variable when you calculate the snap. Check the following demo. On resize I am using set but you can change to a to tween. As for gsTransform, when gsap does any transforms it attaches the gsTransform object to the Dom object. So you can use it to retrieve values only after you animate that element with GSAP. You can console log it to see all the values it sets. Or search in the site and you will find few other threads with detailed info. (On mobile at the moment) UPDATE: @Noturnoo I updated the demo to calculate $target in setProgress function because calculating it in snap was returning incorrect value. Also there are some issues with your set up from start and your slides don't align well but I will let you deal with that. All the best.
  11. Help for Sync Draggable, TL & Click

    Your timeline and draggable were competing against each other to control the same element. I have removed timeline and updated next/prev events. Though there are still issues, like if you click quickly, resize etc. But this should point you in right direction.
  12. setInterval seems unnecessary because you can listen to event directly. Even that is unnecessary because on play you are listening to tick event and updating everything. GSAP uses requestAnimationFrame so it reduces update calls to 60 per second, that will be best way to go. Also the jQuery UI slider doesn't work on touch screen plus you are not using jQuery, so I think it will be better to go with draggable. In following fork, I have removed many unnecessary calls. If you can't picture what is updating what then writing down will be helpful. But don't worry about it too much even I write unnecessary code many times, just eliminating it simplifies your code. Lastly, for any reason if you feel like you need to use setInterval/setTimeout, I will suggest to go with TweenMax.delayedCall.
  13. It was pretty trivial to figure out what is updating what. Actually you need to seek the audio so it will resume from exact time where slider is. So on click event I am setting current time to tl.progress() * audio duration. Also, check this thread as it states some browsers don't return duration so you have to listen to event when metadata is available. Maybe using a audio library will be more useful. https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time
  14. Chrome Dev Tools - animation pane

    BTW you can mimick those dev tools features just from console. Pause from debugger and it will pause ongoing animations. or enter TweenMax.pauseAll() in console and it will pause all ongoing tweens/delayed calls. TweenMax.resumeAll() to resume everything. TweenMax.globalTimeScale(0.5) to slow down everything that GSAP does and TweenMax.globalTimeScale(5) to speed up.
  15. Chrome Dev Tools - animation pane

    Ya those are for pure CSS animations, maybe you can use GSDevTools to debug what you are doing. https://greensock.com/gsdevtools
  16. infinite cube carousel

    Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.
  17. infinite cube carousel

    Ya like I said you can maintain a variable with reference to those tweens, so if cube is animating then you can ignore the clicks until animation finishes. Another option is to increase the timescale of ongoing animation and once it completes only then begin new animation, users will hardly notice this. And sorry I am not really feeling well, I was just excited to do it so gave it a try. All the best.
  18. Moving Element to a Position's Relative to Container

    Here is similar thread that suggests to animate transformOrign by using onUpdate callback. See if that helps. @GreenSock any plans to bring smoothOrigin to html?
  19. infinite cube carousel

    3D cube was one of the first thing that I did as experiment with GSAP. Following is the demo I created by modifying @OSUblake's demo in this thread. You may want to refactor some of the code. Everything is perfect except if you click too quickly the cube behaves like animating cards but you can avoid that by maintaining reference to tween and use it to ignore clicks if cube is animating.
  20. Business Green plugins with Angular / NPM

    Ya it made sense that's why I gave it a try.
  21. animated text challenge

    Here is what you want. In this particular case you can just make overflow hidden on h1 tags. Another way would be to use opacity 0 but it won't have that clipping effect. Otherwise wrapper is necessary. In your HTML you are using some weird spaces around id, kind of unnecessary. Also, not complaining but on codepen you have one cool feature to use, personally I love using it because it makes your code really readable. TidyJS, TidyCSS, TidyHTML under each panel, just try using it sometime you will love it too.
  22. Business Green plugins with Angular / NPM

    Thanks, that didn't really help. But I will let it be for now and revisit it again someday.
  23. Business Green plugins with Angular / NPM

    Ya my path is correct but first I get error asking to use allowJs, once I use allowJs I get following error, Searching for these errors on google hasn't been fun, you just get many unrelated results. Found one thread on stack overflow suggesting to use outDir but that just messes up everything.
  24. how to debug DrawSVG in Angular?

    I don't know why it happens, but it happens with few other plugins. If you console log DrawSVGPlugin before using it or just execute 'DrawSVGPlugin;' statement, drawSVG works. By executing it maybe just makes those functions available for you to use. But if you import it directly as follows, it works without needing to execute that statement. import "gsap/DrawSVGPlugin";
  25. Business Green plugins with Angular / NPM

    About allowJs, following is a pending thread where Dipscom suggested to use club files outside the npm modules by creating 'vendors' folder at root. I am trying my hand at angular recently and gave it a try. Using GSAP with Angular/Ionic has been pretty straight forward if I just copy them in 'node_modules/gsap' but when I tried include them as Dipscom suggested, I was getting same error as OP in that thread, any ideas?