Sahil last won the day on April 7

Sahil had the most liked content!

Sahil

Moderators
  • Content count

    714
  • Joined

  • Last visited

  • Days Won

    40

Everything posted by Sahil

  1. Scroll Magic - Multiple Timelines

    @smallio You had typo in 'triggerElement'. The triggerHook has value between 0 to 1 that determines where your trigger is going to be. Always a good idea to turn on indicators while developing.
  2. Background Slider and draggable

    You can calculate snap using a function as in following demo, a lot more flexible when your slides are of same width. Idea is to use a container with width 100%, which becomes your "viewport" for slider. Then calculate width of your slides container by multiplying length and then use snap function to keep track of active slide so you can recalculate slides container on resize.
  3. Converting to gif causes loss of svg fill colors

    Seems like you just dropped your animation in there and expected it to render automatically, following are some of the things you need to fix, 1. Your animation is made up of multiple svgs, In @OSUblake's demo he uses single svg as source. 2. All your style must go directly in svg, because in javascript only SVG Markup is getting extracted so canvas is not aware of what is happening inside svg. 3. You are rotating svg element itself but it won't help you, you must animate elements inside svg. Which cause svg markup to change and it gets captured by canvas. Otherwise no animation will get rendered because SVG is not changing from inside. 4. In his javascript he is using animation variable to assign Tween to it so that it can be used to extract frames, in your example you are using animation in different file so you will never get output you want because code is tracking different animation. 5. Your SVG's have different viewbox size, in his example his svg viewbox is 350x350 and canvas is of same dimension so basically your viewbox and canvas should be of same dimension. 6. He is using a white rect as background otherwise canvas will render black background. Following is just tiny bits I edited here and there but you get the idea, http://plnkr.co/edit/Nf7shKxcoonMXsfcBU1Y?p=preview
  4. Whatsup Guys?

    Well I don't consider myself GSAP guru either, there are some easy questions that you might enjoy answering. Plus if you really really want people to post questions about banner ads and sizmek, maybe write couple of introductory posts in main forum? I might never do banner ads but I am always curious to know little bit of everything. Some new users might take interest and join you on Banner Animation forum.
  5. Whatsup Guys?

    I thought I was the only one who keeps waiting for questions. Maybe you can occasionally jump to other side of the forum to get some reputation.
  6. It is really easy to convert a CSS animation to GSAP, you just need to copy it mostly as it is. Only difference here is I am setting zIndex using set method. There is some additional code that is required to take care of rapid clicking because you are using button for each image. Take a look at docs in CSSPlugin, it will help you understand CSS animations using GSAP so you can convert easily. https://greensock.com/docs/Plugins/CSSPlugin
  7. If I understand correctly you just need to use staggerTo tween instead of using callbacks, take a look at docs for more information or check the video, https://greensock.com/docs/TweenMax/static.staggerTo() Does that help?
  8. Splittext and Denavagari

    Those circles are like placeholders to all the consonants and rest is vowel. Devanagari works by combining consonant with vowels and creating unique character, if anybody hates spelling in English then you will love it. Looks like perfect idea by @Acccent, you will need to add too many conditions otherwise. This implementation will take care of almost all languages. As for arabic or similar languages (don't have first hand experience with them), they work a lot different at least while typing. Take a look at following video, So with current implementation whatever language it is, if user can split the characters and it makes sense to them then they can use it.
  9. Way to inflating SVG Rect

    I think @GreenSock will have to add some logic to avoid applying negative values to rx and ry.
  10. It's not funny ...

    @shihn Thanks for the response, I think Mikel want to do some kind of squiggly animation using rough.js. Similar to intro in following video, It can be done using MorphSVGPlugin by morphing path from one rough path to another. Is there a way to get raw rough path in your library? So it can be used to morph over short time span so it will appear as squiggly line animation?
  11. @PointC I always got feeling of Blake as Goku and you as Krillin. Sadly krillin keeps dying.
  12. It's not funny ...

    Hey Mikel, I went through the docs of rough js, unfortunately it doesn't give you a rough path that you can use to morph. They have this generator object but the rough path is buried deep inside the object and split into an array. Not an easy way to access it and use it. It does have simple commands that you can use but that is going to be a lot of work to do. Maybe you need to find any other library that generates rough paths for you that you can use to animate. First method that I found to do it using rough js is to draw new rough path on each frame, but animation looks too rough(no pun intended). You can adjust roughness for smoother animation. Another way would be to use delayed callback to limit the paths you draw every second, Anyway, where have you been? How are you?
  13. SVG textPath and textLength quick tip

    Both of you start writing your books, otherwise someday I will do it using your posts. Without royalty, just credits at the end. And your contact information so my readers can contact you for queries. In case you guys haven't seen it,
  14. Well I see two problems, 1. You are using this.previewCase() with parenthesis so it executes function and returns undefined to add method because your function doesn't return anything. 2. Your function takes id as parameter. If I understand correctly, it takes id of single element and animates it. So in this case you are passing nothing to it. So you want to animate all elements you will need another function that does it. Makes sense? I have never used react plus that's a lot of code to go through. @Rodrigo Might be able to help you but he previously has spent a lot of time helping you. I would suggest you to start small before starting to build something too complex. If you are just getting started with GSAP and/or React, I will also suggest to just create your effect in plain JavaScript before implementing it with React.
  15. Animating HTML option tag - TimelineMax

    You can't animate option tags, plus styling them consistently is almost impossible. You can instead use something like jQuery UI which replaces your select tag with custom HTML that you can style or animate as you like. There are many other libraries/frameworks that do same thing but be sure to check if they are accessible.
  16. Velocity Particle Animation

    Ya, I thought they dropped whole processing.js idea and started focusing on JavaScript library only. As the processingjs.org hasn't changed over the years and all examples are old as well. Thanks for the book. I was watching the coding train video.
  17. Velocity Particle Animation

    I just came across a video, coincidentally it turned out to be about processing js. Few years ago I had bookmarked processing js page but never really went through it. So just out of curiosity I visited processing js page and realized now that has become p5js. https://p5js.org/examples/hello-p5-flocking.html Anyway, I was going through their examples page and came across this flocking demo that wraps particles around the canvas. I removed all the flocking code, here is basic wrapping demo. But wrapping isn't big deal, following snippet from demo is for wrapping. Boid.prototype.borders = function() { if (this.position.x < -this.r) this.position.x = width + this.r; if (this.position.y < -this.r) this.position.y = height + this.r; if (this.position.x > width + this.r) this.position.x = -this.r; if (this.position.y > height + this.r) this.position.y = -this.r; } There might be more unnecessary code that you can clean up step by step.
  18. Counter with values from ACF Fields

    Here are couple of threads about counting numbers using GSAP,
  19. Ya it is fixed. BTW, don't you guys think there are too many pinned posts? Right now I can barely see first question when I visit forum.
  20. SVG stroke-dasharray quick tip

    I love the last demo, really cool and great post as always.
  21. Something is wrong with your previewCase function, it throws errors as follow, uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string. react-dom.development.js:619:7 uncaught exception: Cannot add undefined into the timeline; it is not a tween, timeline, function, or string.
  22. Ya I would love it if there is button on right bottom corner of forum that will open simple panel with all links. I had contacted codepen to do something about making links available from search feature but doesn't look like they will do it. 404
  23. Velocity Particle Animation

    It is good idea to post partial demo even if it isn't working so we have something to work with. I don't know why are you using pngs for your particles, from the gif you posted, it doesn't seem necessary. Anyway, I don't have ready demo to post. Following is a tutorial about bouncing particles I came across recently, you can go through it. https://codepen.io/Godje/post/bouncing-particles-tutorial To wrap particles around canvas you just need to change bouncing calculation to wrapping. You can do that as follows, if(particle.left - particle.width/2 > canvasWidth){ particle.left = 0 - particle.width/2; } Note: The above snippet I have written is just to explain, I haven't gone through demos from tutorial I posted, but this should give you idea. You can also search codepen for demos or google for simpler tutorials. If you want to learn about physics based animations then you can get this book http://lamberta.github.io/html5-animation/
  24. I don't know how you have set up things, that's a lot of code to go through. Maybe you are setting some flag that determines if panels are open or closed. (Never used react either) Following is simple demo, how I would do it. Keep track if panels are hidden or not and animate them to the hidden or visible state. Right now in your example, I am guessing that when you click on any panel you are changing the state so when you click your menu button it just resets their position instead of hiding them. Hope this gives you idea.
  25. Animate appended elements

    Ya you can use GSAP to do whatever animation you like that you would normally do with any elements once you add text. Following is a simple example with SplitText but you can do all kind of different effects.