Jump to content
Search Community

ie issues and mobile performance

kweso test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hey there,

i've been asked to create an animated version of this header:

http://locca.azurewebsites.net

 

since i never did propper js/css-animation i first tried it with edge:

http://kw350.com/tmp/loccaHeaderEdge/loccaHeader.html

but the performance was awful. even on laptops/desktops.

 

so i tried to dive into the code myself since i am quite used to as3. and then i found out that my favored as3-animation package is also availiable for js. yey!

 

now this is what i got so far:

http://kw350.com/tmp/loccaHeaderGSAP/ (index.html with iframe containing /loccaHeader/loccaHeader.html the content in the iframe is scaling up to 1280px width).

 

now i would have a few questions, if i may:

1. there is no animation/bubbles in ie10 (btw: win7 64bit). why would that be?

2. is it possible to get the scaling within the iframe in ie?

3. what can i do to improve the performance? (the gs-examples feel so smooth)

4. can the bubbles/particles be scaled from their center?

 

an if i am not too demanding:

5. in the original graphic you an see the bubbles with icons. i made blue bubbles as placeholders for them. those icon-bubbles should morph to location pins when they reach the iphone. would that be possible without using animated gifs? a bit like shapetween in flash (maybe with paper.js?)

 

i would be very thankful for any hint.

tyvm,

kws

 

 

 

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

The header looks great, even in a low end Android device (single-core 800Mhz cpu and adreno 200 GPU), so in terms of performance I don't know how better it can get, perhaps you could try using force3D:true on your tweens, but beware that this comes with it's downside, specially in particles animations. With that particular property in the tween vars, you're passing the tween's target to the GPU so it can be placed in a layer. This improves performance but with a limit, if you pass too many elements in a giving animation, it actually deteriorates general performance, so this is more trial and error. It should be like this:

TweenLite.to(element, time, {vars, force3D:true});

For the IE10 issue, I don't see any issues here.

 

To get the scale information from the iframe, that's a little more complicated. Is not always easy and in certain cases reliable to dig into an iframe, there's a lot of DOM elements to traverse before getting to the depth you need, I've never done it so I can't offer you any advise in that matter, but selecting the iframe and checking the structure in dev tools would be my starting point.

 

In terms of scaling the bubbles from their center, it can be done but you have to use css transforms and not width height. By default the transformation point of an element is it's center point, so you're covered in that matter.

 

In terms of morphing, yep that's a feature a lot of people (myself included) miss from Flash, but you can achieve a workaround. What you could do is rotate your element in 45 degrees and tween the border-radius property in order to make it look like a position pin:

var bubble = $("#bubble"),
    bubbleImg = $("#bubbleImg"),
    t = TweenLite.to(bubble, 1, {borderBottomLeftRadius:'0%'});

TweenLite.set(bubble, {rotation:-45});
TweenLite.set(bubbleImg, {rotation:45});

You can see it working here:

See the Pen irvyf by rhernando (@rhernando) on CodePen

 

Also another choice would be use SVG, I understand that Snap SVG has made some advances in this area, you could check it out.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

To add to Rodrigo's great advice..

As far as accessing the contents of an iframe, you can do the below:

( Note that the iframe src needs to be on the same domain due to cross domain sandbox security. There are workarounds for the sandbox issue with postMessage() and HTML5 has some nice stuff down the line for cross domain iframes. )

But for now using jQuery to manipulate the DOM in a same domain iframe.. try this:

// get iframe
var $myIframe = $("#myIframe");
// get iframe contents
var $myIframeContents = $myIframe.contents();
// find element inside iframe and do something
$myIframeContents.find("body").css({backgroundColor:"#CC0000"});

The above access's the iframe using contents() and then uses find() to get the selector in it. In my code above im just changing the iframe body tags background-color to red.

To get the scale information of an element inside the iframe... your basically using the find() method to select the element, and then get the transform scale property value on that element, that is inside the iframe.

 

Does that help? :)

Link to comment
Share on other sites

Hi,

 

Regarding IE10 I keep seeing it ok.

 

For the shapes, I knew I saw something like that before, as a guitar pick shape, I google it and found this codepen:

 

See the Pen otcem by Vestride (@Vestride) on CodePen

 

The key is the proportion between heigh:width of the element, It should save you from using SVG just for that.

 

Here you can see the question in stackoverflow:

 

http://stackoverflow.com/questions/11982066/css-only-marker-shape

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Nice find Rodrigo!  

Here is a Google Map Marker I made in CSS .. 

 

CSS Example: 

See the Pen xCign by jonathan (@jonathan) on CodePen

  • create simple semi circle tear shape .marker
  • it uses ::before to make the bottom point (which is just a css triangle)
  • and uses ::after to create the middle dark inner circle

HTML:

<div class="marker"></div>

CSS:

/* MAIN CIRCLE TEAR SHAPE */
.marker {
    background: #F1756B;
    position: absolute;
    left: 10%;
    top: 10%;
    /* create main shape */
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    /* positioning main shape */
    margin: -20px 0 0 -20px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* BOTTOM POINT (triangle) */
.marker::before {
    content: "";
    position: absolute;
    /* create bottom traiangle */
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;	
    border-top: 20px solid #F1756B;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    /* positioning traiangle */
    margin: 25px 0 0 -9px;
}

/* INNER DARK CIRCLE */
.marker::after {
    content: "";
    position: absolute;
    background: #2e353f;
    box-shadow: 0px 2px 0px #252a32 inset;
    /* create inner dark circle */
    width: 16px;
    height: 16px;
    border-radius: 100%;  
    /* positioning inner dark circle */
    margin: 10px 0 0 8px;
}

Does that help? :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...