Leaderboard

Maybe you can do something like this by animating progress, if you don't want to use customEase.

These videos are bomb. And your example helped me fix my issue well. My .fromTo and .reverse() needed to be below my Tween and it works great now. I was defining too many variables and I lost sight of my goal. You really helped me get back to basics here. Thanks so much

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation. For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here. Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it. As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play. Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code. If you haven't seen already you should go through these videos which will help you a lot, https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

Not sure about Pixi and Animate CC, it likely has to do with the setup and how both work with each other. Never crossed my mind to use the two together but I'll be looking into it. You could simulate that effect within Animate CC without having to use Pixi. It's not (currently) possible to natively animate the native filter effects in Animate CC since they've disabled that for performance reasons (see this link, Filter and Color Effects section). However, like that doc recommends, if you make a separate clip with the filter applied to the object, you can tween that clip overtop of the other clip (fading the blurred clip in and out), to simulate a blur effect. Sounds like the animated mask was a separate issue (it is possible, and easy, to do that with Animate CC using the timeline -- just make a keyframed mask layer with no tweening). As far as creating an animated mask via hand-coding with DOM elements, I guess you could use SVG for the mask and create a sequence of masked clips that you turn on and off. Otherwise, I don't think it's technically possible to do animated masks with actual DOM elements unless you're just using rectangles and square masks, you're back at using canvas at that point, and might be a fairly complex task to do if you're not familiar with it. it'd be cool to see some sort of library / plugin to make doing this specific task with canvas easy (cough cough). Agree that you should learn to hand-code too and make that part of your arsenal but don't throw away your timeline skills! There's a reason why apps like After Effects exists

You can simply scroll to certain element and don't need to calculate offset. As to answer why it is scrolling randomly, you are trying to scroll to the offset of that slide. So when your 2nd slide is in center, it's offset is 0. So when you click on second link again, scrollTo plugin scrolls to 0 which is first slide. If you click on 3rd link, it doesn't animate because offset of 3rd slide is same as where current scroll is. Plus if you click too quick the whole animation gets messed up because now you are referencing offsets while slides are at random positions.

I see your issue. The <a> element needs to be `position: relative` and you need to tween that element's `left` property. Currently you are tweening the button that is inside <a>. Refer to css docs for when "left" can be used:

I remember helping somebody make something like scramble text here. The first demo with the endArray plugin is kind of interesting. I was going to update it, but ended up with something almost exactly like the scramble text plugin, emojis and all.

Thanks for asking. You are allowed to use the premium plugins in projects that others hire you to do. Its part of the value of the membership. You are more attractive to clients (beyond your natural, good looks) because you bring an advanced toolset and skillset that allows you to do more in less time (which you should be charging more for ) The company that is hiring you can not use the plugins in other projects.