The -ms- prefix was required for animations, transitions, gradients and font-feature-settings in pre-release versions of Internet Explorer 10. The Release Preview and stable version of IE10 support all of the aforementioned features unprefixed (as do IE11 and Microsoft Edge, needless to say).1
So -ms- is no longer needed for animations, transitions, gradients and font-feature-settings, because no version of any Microsoft browser in existence requires the prefix anymore. You are just needlessly increasing file size and wasting bandwidth by including the prefix for those features.
While we're at it, it's an equally unnecessary waste of bandwidth to include -ms-transform in any animation or transition styles, because the only version of IE that requires the -ms- prefix for transforms is IE9, which doesn't support animations or transitions anyway.
1 Ironically, thanks to IE's historically long development cycle, Microsoft is the only vendor to have followed the process of prefixing experimental features faithfully from start to finish: prefixing in unstable builds, and shipping to production unprefixed, reserving public-facing prefixes only for vendor-specific features.
Old versions of the browser don't suddenly acquire the code from the new version of the browser. If someone continues to use Joes' Webby 6, and the standard version of the feature isn't supported until Joes' Webby 7, then people who don't upgrade to version 7 won't get support for the features (including the standardised version of the CSS feature).
hi hemant,
no i havent found any solution. i made an update of the php-version, of the wordpress-version but nothing helped. i deactivated the animations, but that is not the solution. the funny thing is, that i installed the beaverbuilder and the same theme on another server and it worked. i have no idea and nobody who ask could helped. very strange. if you find something, please let me know. may i ask where you host your page?
may i have a question: what do you recommend for a fast laoding page speed?
i use the bb and the astra theme, but still my sites are not that fast. even with smallsized pics and and little content. like you saw, i use the fastestcache and the autooptimze. are there other usefull tools?
The Create Frame Animation button is not an option in CS6 unless you have the Extended version--which I don't have. I was able to find a way around this in an earlier tutorial I completed but never really knew how I was able to accomplish this task. It seems to me it was something to do with the mini bridge feature. I was able to show the image in the Timeline again this morning. I was curious as to how I managed this, closed out of Photoshop to figure out what I did and now I can't show the layers in my Timeline again because I don't have any idea how I accomplished it in the first place????
Figured it out...the first image is animation I created. I made the soccer ball move around so I could tell it was my work and not that shown in the tutorial. The image I download from Blue Lightning website: Photoshop Tutorial: How to Create GIF Animations from Video, Graphics & Photos! - YouTube shows the head also moves vertically? Thanks for looking, Lucie.
So if you want to use different animations for specific break points you have to select where you want your animation to show. In your case you have to select the animation you have for desktop in the mobile designer and select display none
That way your animation will still show on desktop tablet and mobile landscape, but it will not show on mobile portrait. Additionally, once you build an animation for mobile you have to make sure that the new mobile animation only shows on mobile portrait by doing the same thing you did for the desktop animation. I hope this makes sense. Let me know if you have more questions.
You can set up your ix to fire on certain breakpoints and not fire on other. So you may create several different interactions/animations and then fire them only on those breakpoints that you need them.
ix means interaction. You cannot affect the same element with different ix. Or you can but it may (and most likely will) lead to buggy animations. You may put the elements you need to target inside parent divs and target those.
Hello!
On my website, I connected tweenmax and gsap and have brake in animations when I first load the page. If you wait a little, the animations work correctly and there are no broken when you turn it back on (but if I refresh page, animation is broken again). Please tell me what are the common reasons for broke in animations? Maybe I posted the scripts incorrectly, but I tried to change positions and animations either stopped working, or worked differently, but did not stop broken
I have a lot of code, so I don't know how to put it in codepen, maybe there are some basic tips and tricks on how to properly connect scripts or maybe solutions that fix the problem with animation delay?
Kinda sounds like the animated elements may not be loaded and ready. Are you loading your scripts at the bottom of the page? If not, are you using a load and/or DOMContentLoaded event listener? Make sure custom JS is being loaded after the GSAP scripts. Check the console for errors.
But animation with gsap or scrolltrigger is interrupted when page is loaded. The animation turns on when the page loads, then stops and continues to work after a while. How can I make it work without interruptions?
Yes, this is an example of animation that I use. It works correctly, but brake when the page is first opened. It turns out that the animation turns on, stops for a moment and continues to work. I thought that some script is loaded and because of this, the animation slows down at the beginning
Can you tell me how you can make scripts load when loading the page? Now my scripts work correctly, but those that are responsible for animation are turned on at the last moment of loading the page, because of this, an empty page opens first and only after a while the animation turns on. I would like to make the animation turn on immediately, try to install async, but because of this, the scripts stop working
Maybe you're struggling because you're loading a LOT of files and it's taking a while, but your animation code is waiting for the "load" event to fire? You can switch to a "DOMContentLoaded" event instead if you want to fire it as soon as all the HTML markup (only) is loaded (instead of waiting for all the external assets to load too).
@GreenSock Yes, of course I understand that. But I thought there was some kind of one-size-fits-all solution, or maybe a way of properly placing scripts so that they work when the first content becomes visible. I sent my website only to describe the problem more clearly. You may have noticed that the animation does not turn on immediately, but later and I want to fix it
Yes, that's exactly what should happen. GSAP doesn't wait at all. If you have things set to execute in a DOMContentLoaded, that should happen right away. If not, there's something else going on in your site that's breaking things. If you can isolate the issue in a minimal demo like a CodePen (NOT your whole live site) and you think it's GSAP-related, we'd be happy to take a look. Otherwise, you're welcome to post in the "Jobs & Freelance" forum for paid assistance.
Does GSAP turn on the first time content appears? And you went to my site, what do you think the delay may be associated with before the animation and can you please advise on what the problem may be? Maybe there were similar requests or there is some kind of universal solution?
And you went to my site, what do you think the delay may be associated with before the animation and can you please advise on what the problem may be? Maybe there were similar requests or there is some kind of universal solution?
That's what I've been trying to tell you - we cannot troubleshoot live sites with 4000 lines of code and 25 external libraries. No, this is not a common question at all. There's no "universal solution". You need to figure out what the problem is to begin with, like what exactly is happening in your site's loading, the order of things, why there's a delay occurring, etc. Maybe try to use console.log() in an embedded at the end of your page and then another one where your GSAP code executes and see how much time elapses and then dig into what's happening inbetween. This isn't a GSAP-related question, sorry - this looks like an issue with the rest of your site. If you can reproduce the issue in a minimal demo on CodePen, we'd be glad to take a look. But continuing to ask us to troubleshoot your live site isn't going to result in a better answer
This sounds like a bad plan FYI - If it's just the library files that's ok, but your animation code will likely need to be run after the DOM is loaded so it's best to put it after the footer.
I can't actually load your site but maybe you're talking about FOUC instead of loading?
I added a page to CodePen and am now trying to gradually delete scripts. I noticed that when deleting scripts and styles that are not related to animation, it does not stop slowing down, so I tend to believe that the error in the code with animations
Initially, I wrote about the fact that my scripts were loaded with a delay, but after I deleted the extra ones, the problem went away. However, now, this problem is repeated in the mobile version, despite the fact that it is the same site
I have one burger menu in the desktop and mobile versions, it works correctly and without delay in the desktop version, and when I open the menu on mobile version (on phone or desktop with change Dimensions using DevTools), it starts broke when I first open
Sorry, @Daniyarkz, but you still seem to be trying to find ways for us to troubleshoot loading issues on your whole site. A "minimal demo" doesn't mean copying/pasting almost 4,000 lines of HTML from your live site into CodePen
If you need help with a GSAP-specific question, please provide a very minimal demo and a very clear question. Otherwise, for general troubleshooting of your site and loading issues, you are welcome to post in the "Jobs & Freelance" forum to see if you can hire someone to help but please stop posting here about those things that violate the forum guidelines otherwise we'll need to ban your account.
795a8134c1