OSUblake
-
Posts
4,261 -
Joined
-
Last visited
-
Days Won
439
Content Type
Profiles
Forums
Store
FAQ
Showcase
Product
Blog
ScrollTrigger Demos
Downloads
Everything posted by OSUblake
-
Isn't already doing that? The first slide starts out with an opacity of 0 and then animates to an opacity of 1. So at the end of slide 5, everything gets reset to an opacity of 0. If you want to replay the timeline from a different starting point, you can use a technique like this. And if you trying to create dynamic animations, this is a really good article. https://css-tricks.com/writing-smarter-animation-code/
- 11 replies
-
- 3
-
-
- timelinemax
- timeline
- (and 1 more)
-
First, you are missing some necessary files. It's usually better to just load TweenMax as it contains everything you need. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js I'm not exactly sure what you're trying to do here. Maybe something like this? https://codepen.io/osublake/pen/ZdBdvN
- 11 replies
-
- 1
-
-
- timelinemax
- timeline
- (and 1 more)
-
Just add your array to another timeline. var mainTimeline = new TimelineMax({ repeat: -1 }) .add(tmArr) If you need more help, please provide a simple demo.
- 11 replies
-
- 2
-
-
- timelinemax
- timeline
- (and 1 more)
-
Hi Ayman, I just noticed your PM. I made these demos more as demonstration of how to visually manipulate connectors. As I stated earlier in this thread, handling the logic to make it fully functional is really complicated and beyond the help that can I offer in this forum. I think using a declarative framework like React could really simplify a lot of the complexity. And I know there are other libraries that can do this sort of thing. I would try figuring out what this tool is using. It looks like a good starting point. http://idflood.github.io/ThreeNodes.js/index_optimized.html#example/rotating_cube1.json
-
Please don't ask another question in a edit because we don't get notified. Just make a new reply instead. Like I said above, your video isn't valid. You can't link to YouTube like that. Use a real video file. https://codepen.io/osublake/pen/d2901d1c90cebbfd4dbdf747c5e44c2e
-
You don't even have a valid video. Callbacks with parenthesis are called immediately. TweenLite.to(textContent, 0.7, { opacity: 0, delay: 2.5, onComplete: this.playVideo(video) // BAD }); TweenLite.to(textContent, 0.7, { opacity: 0, delay: 2.5, onComplete: this.playVideo // GOOD onCompleteParams: [video], // GOOD callbackScope: this // GOOD }); And it kind of pointless to pass in the video to your playVideo method when it's already a property of your class. playVideo() { this.smokeVideo.play(); this.smokeVideo.playbackRate = 1.5; }
-
And actually, I don't think you should be adding an event listener at all in your JavaScript. That should be in your template. Have it call a method that will reverse this.timeline.
- 2 replies
-
- 2
-
-
- reverse
- onreversecomplete
- (and 2 more)
-
When using a framework like Vue, you should use refs instead of selecting elements. https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs Your animation method is rather large. Try splitting it up into logical pieces. Searching for a class name is something you do in jQuery. You can pass arguments into your animation method so you know what button is being pressed. Now the big issue is your back button. You're adding an event listener to it every time an animation plays. When you click it, it's going to reverse every single timeline you've ever created. Consider saving the timeline when you create one. That way you can always refer to the current timeline and not some timeline that was captured on previous plays. this.timeline = new TimelineMax(); Also, I don't understand why you need to use clearProps.
- 2 replies
-
- 3
-
-
- reverse
- onreversecomplete
- (and 2 more)
-
No, that's for using the plugin by itself. Check out the throwProps properties in the draggable docs. https://greensock.com/docs/Utilities/Draggable Draggable.create(".drag_item", { bounds: $('.drag_zone'), edgeResistance: 0.9, throwProps: true, throwResistance: 2000 // <-- HERE });
-
I honestly think you're chasing after phantom users. Be sure to check out some of your own analytics. You might be surprised at how rare real IE users are. And browsers ignore CSS they don't understand, so there is a fallback. a { /* FALLBACK */ color: #7F583F; color: var(--primary); } Also, you can serve pages based on the capabilities of the browser. I do this all the time for older browsers.
-
I think that might be a little skewed as the government is one the largest the users of IE. The government also has special contracts with Microsoft for continued support. This table might be a little more realistic. https://caniuse.com/usage-table I understand why clients want to support every browser, but I try to get them to rethink that... maybe by charging them extra to support IE with all the bells and whistles. ? BTW, one the reasons Edge is moving over to a Chromium architecture is to allow Edge to be installed on older Windows machines. In theory, that should lower IE's usage statistics.
-
I don't think there are any good polyfills for CSS vars. Can you objectively justify supporting IE11 i.e. do you have any data to back up why you need to support IE11? When developing/engineering stuff, there are certain tradeoffs that you must make. You're missing out on a lot of great features by purposely supporting IE11.
-
A one-liner... TweenMax.to("#right-container", 1, { "--width-pct": 100, "--width-rem": 4 }); https://codepen.io/osublake/pen/348b53aa3d39c06a9bf3eba7e0359bc8
-
Looks like you didn't load the ModifiersPlugin. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/ModifiersPlugin.min.js https://codepen.io/osublake/pen/cd4870da8a3e1e93ed1734946d7ec49e
-
My demo literally shows you how to use calc. GSAP cannot animate calc like you want because the browsers reports the width in pixels.
-
If you want to animate calc, then use CSS vars kind of like this. https://codepen.io/osublake/pen/OvbqXL If you need more help, please provide a demo. Pictures are not helpful.
-
It doesn't need the CSSPlugin. It's React for PixiJS. I've seen demos of it working fine on CodePen, but I'm on my phone so I'm notg oing to search for them right now.
-
You should probably mention what you did try, and how you're building site, otherwise we're just shooting in the dark here. I would start by getting rid of that require statement. You shouldn't mix and match import and require statements like that. Also check out the docs. https://greensock.com/docs/NPMUsage
- 2 replies
-
- 1
-
-
- throwprops
- draggable
- (and 2 more)
-
I completely understand your question. The problem has to do with the positioning and z-index of some of your elements. Make a simple demo and I will show you. It's a CSS issue. This question has been asked more than once, like here.
-
Best compression for your banner assets
OSUblake replied to Christoph Erdmann's topic in Banner Animation
I can understand why you don't want to do batch processing, but your tool works better than other tools out of the box. ? I guess another suggestion would be to do improve the comparison between the original and current image. Squoosh does a good job of this. https://squoosh.app -
I can't help you without a demo, but this has nothing to do with GSAP. Please read about the stacking context. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
When using any type of framework (Angular, React, Vue, etc) you should ALWAYS access elements through reference variables (refs). Using selector text is bound to cause problems. You mentioned you were using React, so you might want to check out this page. https://greensock.com/react
-
Just add GSAP and Vue to a CodePen, StackBlitz, or CodeSandbox demo, and share the link. I think checking out some of Sarah Drasner's stuff on CSS tricks might help you out. https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ https://css-tricks.com/intro-to-vue-5-animations/ And maybe this article https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a
