PointC
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by PointC
-
Hi @Mheetu Welcome to the GreenSock forum. What's happening is you're tweening to a label which isn't really the mouth pose you want. For example, you click 'frown' and then move the playhead to the 'frown' label. But that label is actually at the beginning of the timeline so you go past the frown pose and back to the neutral pose because that's what the mouth is doing at the beginning of the timeline. You could make some label changes and make this work, but in this case I'm not sure a master timeline would be the best choice. What I mean by that is what if you had 10 mouth positions and you were on position 10, but wanted to tween to position 1? You'd see all the poses as you tweened the playhead back to pose 1. See what I mean? I think just tweening in the button handling functions would be easier. Something like this: Hopefully that helps. Happy tweening and welcome aboard.
-
Yeah - the trick is just make sure your circle start point is where you want it to open. There are various ways to go about that. We have a big thread talking about circle start points that you might find helpful too. Happy tweening.
-
@GreenSock - all joking aside, even after hanging around here for a few years, I'm still always impressed with the speed of improvements and bug fixes. I think that's one of those things people don't necessarily appreciate until they have a request or spot a little bug. We can all joke and whine about big companies like Adobe or Microsoft and trying to get their attention on something, but at GreenSock things get done quickly. It doesn't matter if it's a Club GreenSock Member or not, the request is given the same weight. Truly remarkable.
-
I don't know anything about FB ads, but if you need to create some GIFs from your SVG animations, check out @chrisgannon's SVG2GIF. https://github.com/chrisgannon/SVG2GIF Happy tweening.
-
Ha. I'm just glad you didn't make more improvements to my flicker version. I really like the changes you made to my first demo, but I was afraid we were getting into some kind of Zoolander style walk-off demo battle.
-
You should probably have a chat with the guy that wrote the code for that ModifiersPlugin.
-
Probably not what you'll want to use on this project, but you mentioned Christmas lights so I thought I'd make a little addition to @Carl's 'double the boxes' version. If you wanted to display that bad fluorescent light flicker or maybe lights that were about to short out, you could add a Rough ease to opacity tweens. Happy tweening.
-
Hi @beau_dev If I understand your question correctly, I think a quick loop through the elements would be an easy way to make it happen without jQuery. Here's a quick example that should be easy to understand. It randomizes the duration and a delay and yoyos the opacity. You could also add each tween to a timeline if you need that kind of control.Hopefully that helps. Happy tweening.
-
Look at @Shaun Gorneau work with that shiny new Moderator Badge. Seven minutes from question post to answer. Nice work. Congratulations on the promotion. You've earned it. Now you'll have to test your quick-draw question answering speed skills against a super fast guy like @Sahil.
-
In addition to the usual suspects of ScrollMagic and Waypoints, you may want to check out The Intersection Observer. It's come up in a few threads: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Hopefully those links give you some ideas. Happy tweening.
-
Hi @Chibie Welcome to the forum. As mentioned above, a demo will be necessary to get you the best answers. You said you could not replicate the issue in your demo. Does that mean you're seeing different results locally than you see in the demo? If the demo is working correctly, but your local version is not, I'm wondering if you may have some conflicting CSS transitions? Just a thought. We'll know more when we see a demo that shows the problem. Thanks and happy tweening.
-
You're welcome. That's how we roll in the GreenSock neighborhood. Thank you for providing clear questions and simplified demos. It makes troubleshooting and answering questions so much easier and results in better answers for you and all the other community members. It's most appreciated. Happy tweening.
-
Hi @emilychews You could do something like this: var tl1 = new TimelineMax({onComplete:function(){tl1.play("start")}}); You could also make the fade tween a stand-alone tween and then onComplete play the main timeline. There are lots of possibilities. Hopefully that helps. Happy tweening.
-
How is @Sahil learning everything so quickly? His knowledge seems to be growing exponentially. Do we have verification that he's real and not a new AI that @OSUblake created in the Matrix? I'm really starting to feel like a slacker.
-
You can search the forum/Google for FOUC (Flash Of Unstyled Content) Here's another post by Master Blake that shows his approach. Happy tweening.
-
Hi @Cristo Welcome to the forum. You can click the magnifying glass in the upper right part of the top menu and enter your search terms. If that doesn't get you what you need, you can also Google the forum pages. To limit your search to GreenSock site results, you can do something like this: site:greensock.com your search terms If you want to search for an exact phrase, (say something like timeline objects), you'd put your search terms in quotes: site:greensock.com "timeline objects" Hopefully that helps. Happy tweening.
- 1 reply
-
- 5
-
-
Hi @Bigtreat We'd ask that you please not request help from members through the private message system. It's best to keep all the questions and answers in the public thread so others can follow along and learn too. If you want to contact a member about hiring them, then certainly reach out via PM. I know @Sahil gave you some solid advice about getting started here: Have you gone through the learning page here? https://greensock.com/learning The blog also has wonderful articles to help you get a better understanding of GSAP. https://greensock.com/blog/ You can also use the forum search feature (upper right) to find threads talking about the parallax effect. (We've had several.) We don't have the resources to take you through an entire project from start to finish so we ask that you get something started and post a specific GSAP related question when you get stuck. Simplified demos will get you the best answers. We're always happy to help with GSAP related questions and problems. Thanks.
- 8 replies
-
- 5
-
-
- gsap animation
- how to
- (and 3 more)
-
@Visual-Q @Tasty Sites @MindGamer - thanks for jumping in with extra info. It's always good to see other workflows and tips. @Carl - I've tried to submit feature requests for SVG export changes. The feeling I get from Adobe is that their team thinks they know best and they don't pay much attention to user requests in this area. One new feature I've requested in the past is in Beta now - larger anchor points and control handles. Those tiny dots are almost impossible to grab sometimes. I've also requested a visual reference for path direction. Most 3D packages overlay a gradient on splines so you can easily see the direction and flip if necessary. Maybe a hollow dot at one end and filled dot at the other? How freaking hard would that be Adobe? As it is now, you have to add an arrowhead to an AI path to figure out which way it's going. Looks like Adobe may be short on cash though as I just received an email today that my fee is going up a few bucks a month after my next renewal. If anyone does want to submit a feature request or up-vote an existing request, you can do that here: https://illustrator.uservoice.com/
-
feturbulence Applying feTurbulence to shape? (basic svg question)
PointC replied to beau_dev's topic in Banner Animation
If you want to restrict the filter to the SourceGraphic, you can throw in an extra composite with the source before the multiply. You can do that on a group too. Hopefully that helps. Happy tweening. -
Hi @Irfanm Yes - you can certainly create an infinite repeat with a delay. The easiest way would be setting yoyo:true and repeat:-1. Something like this: TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:-1, repeatDelay:3, yoyo:true}); If you want to set a certain number of repeats and then call a function, you'd write it like this: TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:3, repeatDelay:3, yoyo:true, onComplete:onComplete}); function onComplete() { console.log("done"); } More info in the docs: https://greensock.com/docs/TweenMax https://greensock.com/docs/TimelineMax Hopefully that helps. Happy tweening.
-
Hi @Irfanm Welcome to the forum and thanks for being a Club GreenSock member. The main problem is you have multiple paths with an ID of 'step0'. I'm not sure which one you wanted to target (IDs should be unique), but here's a fork of your pen with everything working correctly. I deleted everything from your SVG that wasn't in use to simplify things a bit. You could also use a timeline instead of those tweens with delays if you like. When creating a demo, we'd ask that you please not post Club plugin code in the JS panel. You don't need any GSAP related source scripts in there. You can simply add the necessary scripts via the little gear icon in the JS panel. Here's a CodePen with all the CodePen safe Club plugins for use in your demos. Happy tweening.
-
I know, right? For their SVG export and save process, Adobe has chosen the Russian nesting doll method.
