Sahil

We had same question, check the following thread.

Hard to tell how you can build entire website, following are some of the threads with similar ideas or animation. It is just a lot of tiny steps and then putting them all together.

Quote

If Jack is playing then @Sahil and I get to be on the same team. We should probably grab the rest of the mods for our team too. 

I thought I had winning move but @Acccent already pointed out same thing I was concerned about.

Not possible out of box.

But you can chain your tweens in timeline and adjust the position parameter to get desired effect for last elements.

There is also option of cycle if you are trying to do something crazy but it will only let you change delay instead of duration, though probably not what you are looking for.

https://greensock.com/cycle

@PointC Congrats, great achievement in short amount of time. Your work here must have helped thousands of users.

BTW like YouTube does @GreenSock sends us Green/Silver/Golden and finally diamond commas?

Quote

But no fair adding a bunch of posts like "I agree" and "Well said".  

 I agree

You can do that by using multiple scenes for different sections. But it can get complex with too many unexpected behaviors. I will say avoid using from tweens unless you know how the immediateRender works, check the following video.

You can use to tween instead to avoid complexities. For example the following demo works without any issues,

Then following demo with from tweens shows some unexpected behavior, it will make sense once you watch the video.

It is going to be little complex but doable. In following demo I am playing an animation by detecting which section is active and calling animation for it. Its not enough though.

You will need to create an array of animations so you are able to use index and call different animations for particular section, somewhat similar concept but not exactly as in following thread.

So,

Step 1, determine which section is active.

Step 2, call animation for that section by determining index and use that index to play animation from an array.

But that's not enough to reverse animation, so

Step 3, Use onReverseComplete callback to trigger the change of section.

See if that helps. I won't be able to post complete demo at the moment. But I might work on something similar in couple of days so I will post a simple demo for you.

You are using really old versions of Draggable and TweenMax. I don't have Apple devices to test it but check following demo with latest versions, it should work as this problem hasn't reported by anyone else.

To get latest files for your codepen demos, use following link for free to use files and codepen demo for club plugins,

https://cdnjs.com/libraries/gsap

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

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.

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

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.

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.

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

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?

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.

Quote

If anyone has more feedback about the current implementation of specialChars, let me know so that I can ponder it before shoving this into the "official" release. 

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.

I think @GreenSock will have to add some logic to avoid applying negative values to rx and ry.

@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?

Quote

We're starring in a new buddy cop show this fall on CBS: "Math Whiz and Simple SVG Guy" 

@PointC I always got feeling of Blake as Goku and you as Krillin. Sadly krillin keeps dying.

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?

Quote

You probably have enough quick tips to write your own book. 

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.

Quote

Put that on Twitter. I'd be curious to see if and how they would respond to that.

In case you guys haven't seen it,

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.

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.

Quote

@Sahil Processing.js is more like a binding to the processing language. P5.js is a little different in that it doesn't use the processing language, and is written in JavaScript.

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.