Visual-Q
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Visual-Q
-
Yeah it would be a lot easier to understand if you got rid of all the graphics for now and just simplified it to the basic elements you are having difficultly with. Once you get it working then you can add them back in.
-
You don't need to load all those gsap files Tweenmax should do it for you. It includes timelinemax and cssPlugin, and you may find it easier to load those scripts in the settings rather than html on codepen. You might want to start from the starter pen. https://greensock.com/tweenmax Make sure you have included jQuery before the other scripts and use proper syntax for using .width() method $('.slides_panel').width() https://api.jquery.com/width/ You should also probably not mix versions of scrollMagic make sure it's all 2.0.7
-
Clever how you did that, I will have to steal it.?
-
You appear to be telling portfolio text to go "to.....{opacity:1} if you want to fade out you want to go to opacity:0 - see also gsaps autoAlpha Though your x animation appears to be on the portfolio text item not on :before it's worth noting pseudo elements (i.e. ::before) can't have inline styles so I don't believe gsap can directly animate them. You would need to animate something that affects the position of the pseudo item instead. Or better yet refactor your html so it isn't a pseudo element if possible. I've never attempted scrollMagic with horizontal scrolling but your pins do seem to be problematic: I would suggest you visit scrollMagic forum and docs with questions as it is not a gsap product and see: https://scrollmagic.io/examples/basic/going_horizontal.html
-
Pretty hard to know for sure what's wrong just from the description. However if your intention is to call the ajax content after the timeline is finished you probably should do it on an onComplete callback. https://greensock.com/docs/TweenMax/eventCallback or if you want call it inside the timeline at a specified point see https://greensock.com/docs/TimelineMax/add or https://greensock.com/docs/TimelineMax/call Note also the proper way to pass parameters in the docs so the function doesn't run immediately. I don't do much ajax but I can imagine one potential issue you may have doing this is the ajax loaded content may not be ready when the subsequent animation occurs so you may need to have a way to wait until it is all loaded.
-
You wanna be careful with those awesome posts @Shrug ¯\_(ツ)_/¯ or they'll make you a moderator. And once you're in you can never leave. No matter how far you run, you will wake up back in the forum.
-
I think it would be cause for great celebration worldwide if IE could finally and completely be declared dead.
-
Do you mean you want to do this - wave object rotated 180 deg, height reduced, and moved to top: https://codepen.io/Visual-Q/pen/jjyQdQ
-
If you're talking about the full screen transitions when you click links, this looks like a worpress site thas is using animation to load new page content, may be using barba.js or they may have created their own ajax loader, either way as Jack said this type of whole site construction advice would be beyond the scope of this forum. if you search barba.js you'll find several posts that discuss it on the forum. That being said anyone who wants to take it on are welcome to jump in... Happy tweening!
-
Yeah we usually do that when we make the decision to end support for a legacy browser and IE11 is just about due, but i'm going to err on the side of caution for a little longer. It is time I familiarize myself with some newer css properties though, as the changeover will be soon.
-
Those numbers are definitely more encouraging.
-
Been hearing that since IE5. Unfortunately clients write the cheques and consumers decide what browser to use. I have to satisfy them.
-
I have no idea myself how many people use it but the us gov site which should be pretty objective https://analytics.usa.gov/ reports about 7.4% usage almost 2x what edge gets. That's still far too common for me to abandon support unfortunately. Cut that in half and maybe I can think about dropping it. Clients drive the bus. For now I'll just have to wait.?
-
@OSUblake Have you been using css variables in production sites, are there any reiiable polyfills for IE11. I'd like to try them but it's got to work everywhere otherwise it's a no go.
-
And if you want to get all the way to the edge set body margin to 0.
-
Cool, I didn't think about easing.
-
If you REEAAALLY want gsap to write a calc that animates... I probably would never actually do this, but it was fun to figure out... var tween = TweenMax.to('.img-wrapper', 1, { width: 1, modifiers: { width: function() { return ('calc(' + (tween.progress() * 100) + '% + ' + tween.progress() * 4 + 'rem)') } }, ease:Linear.easeNone }) *Updated with Jack's suggestion TweenMax.to('.img-wrapper', 3, { width: 1, modifiers: { width: function() { // this.ratio respects ease return 'calc(' + (this.ratio * 100) + '% + ' + (this.ratio * 4) + 'rem)'; } }, ease:Expo.easeInOut }); https://codepen.io/Visual-Q/pen/LKRLvO?editors=1010
-
Calc is not just a simple property it's an equation that is passed in to css for parsing. There are many rules governing how it works and it can be written in a number of ways with much more complicated equations than just this + that , that I think would make it very difficult to implement directly in gsap.
-
Sorry I don't know what I was supposed to look at in your link so I'll guess based on your description. If you want to have the inner container start at parents padding then extend to full viewport you could also animate parents padding to 0. Then the inner container would fill the viewport at 100%. If you make a codepen it will be much easier to help you.
-
Assuming #right-container is nested inside #main-container you would probably be best not having 4rem left right padding if you want to fill the width of your viewport. It kind of runs counter to what you are trying to achieve.
-
Wow, never occured to me to pass an ease to cycle. Could do a lot of really cool stuff with that. As @PointC demonstrated the onUpdate isn't needed unless of course you intend to do more with the callback function.
-
Note sure about whether you can throttle a callback in that way, but you could probably make your tween behave the way you want with stepped Ease. https://greensock.com/docs/Easing/SteppedEase
-
I don't see any issues on my machine, however... It doesn't seem to be as much of an issue these days but in the past having objects on different layers (z-indexes) animating often affected text rendering particularly in Safari, this usually meant you had to play with font smoothing or other font rendering options to fix it. You mentioned you're on an older mac which suggests that maybe it's an older browser as well, that is displaying this type of bug. An article from a few years ago discussing something similar. https://www.lockedownseo.com/webkit-bug-slider-causes-font-weight-changes-on-page/
-
Nice effect. It works on Firefox on my mac.
