martis

Hi Carl, I am trying to avoid having to write a line of code for each property.... TweenMax.from(sprite.position, 5, {z:40}); TweenMax.from(sprite.scale, 5, {y:2}); and write it in one line...

Figured it out... attr:{ } Err nm this doesn't work for what I am trying to do

Hey guys, Sure this has been answered but I am having trouble finding an answer. Working with Three.js and want to condense my tweening. I remember reading about a new way to tween values of properties in one tween. This... TweenMax.from(sprite.position, 5, {z:40}) versus... TweenMax.from(sprite, 5, {position:{z:40}})

Been messing around with scaling some text in Chrome and cannot get good results. It's either smooth animation but blurry text, or choppy animation with smooth text...

@OSUblake I'm pretty let down by scroll magics performance on mobile without using i-scroll or some other hack... but love how a lot of the heavy lifting is already done. Looking for a better solution... I was looking at Apple's page on mobile and it performs really well: https://www.apple.com/homepod/ I see they are using TweenMax/TimelineMax, but was wondering how they are trigger/tracking things. The animation at the beginning of the homepod rotating is really smooth based on scrolling...

I've been using a mix of both ScrollMagic and custom functions. Wanted to see what else people may be using and why. Thanks!

Thanks guys, Doing the transform in the SVG object itself worked. Weird that it would not transform it using JS...

Hey guys, Working on some SVG animation and noticed that rotation was not working properly on Safari (osX and iOS). Check the pen in chrome and firefox (the circle is rotated correctly and starts at the top). If you check the pen in safari the rotation does not happen and it starts at the 3 o'clock position. Thanks

Hey Jack, I tried to make an example that replicated the issue but was not able to recreate it... There may be other external styling involved that I am unaware of

No worries... I ended up wrapping the elements in another div. In the future I will just use xPercent/yPercent as Jack suggested. Thanks!

Hey guys, I have an older project where I was centering everything using position: absolute; left: 50%; top: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); I noticed when I upgraded to the latest GSAP that if I do a tween on any of those elements x or y that I lose my centering... Any advice on how to remedy this without having to do a whole lot of rework? Thanks

Trying to unclaim this topic but it's not working... :\

Thanks for the info Jonathan! It's definitely specifically related to Chrome.... Firefox and Safari run smooth as ever

I will do more testing and see if I can simplify the issue

Hi guys, I am trying to position an object in the bottom left corner and tween it to the center of the window. I am trying to avoid animating left/top or wrapping it in a 100% height, width div with xPercent, yPercent for performance reasons. As you can see it works, but once you resize the window it breaks down. Is there any way to achieve this only using x, y without rebuilding the timeline on resize? (It's part of a much larger timeline) Much appreciated!

Hi guys, Running into a fun one... I'm developing a site and performance is great (even on old ipads and iphones). I was testing and noticed that when I run the site on chrome on a non-retina monitor performance is fine. However, when I drag the browser to my retina monitor and run it, performance is *horrible* I'm using latest GSAP and latest version of Chrome (mac). Is this related to the chrome issue you guys had been talking about a few months ago? Tried changing the CSSPlugin.defaultForce3D to see if this changed anything, I did see improvements if i set it to FALSE? Sorry no pen, just wanted to see if anyone else had experienced this. EDIT: After further testing it is DEFINITELY an issue with force3D. If I apply any sort of 3D settings to my objects performance tanks. Thanks

Thanks guys, appreciate the responses as usual!

Hey all, If I have image assets that do not have transparency, which will perform better in the browser, JPG or PNG? Thanks!

Thanks for the response Jack! It is hard to notice much of a difference. I am dealing with fairly large image assets so every bit counts...

Hi guys, Wanted to ask the experts a performance question... Say I have 2 divs that I am fading out at the same time. Is it more efficient for the browser to perform the fade on the 2 objects or would it be better to put them in one div and perform the fade on the div? Thanks!

Thanks Carl! This worked like a dream

Hey guys.... I have a Timeline with labels...., but only certain labels are "key" labels. "Label_1", "Label_2", "Label_3", "Label_4", "Label_5" I made an array with the "key" labels... keyLabels = ["Label_1", "Label_3", "Label_5"]; What's the best way to find the before or after "key" label from the current label? I am assuming its using getLabelsArray and seeing if the labels are in the key index or not... Thanks!

Hey Captain, Would you be willing to put a simple example up of a component and how you are calling the animation? I got it working with this, but know the string ref is not best practice... callback is preferred? import React from 'react'; export default class Home extends React.Component { componentDidMount() { var home = this.refs.home; TweenMax.to(home, 1, {alpha:0}) } render() { return ( <h1 ref="home">Home</h1> ); } } Got it working with the callback... import React from 'react'; export default class Home extends React.Component { componentDidMount() { TweenMax.to(this.home, 1, {x:200}) } render() { return ( <h1 ref={(ref) => this.home = ref}>Home</h1> ); } } Thanks!

Hey guys... I am trying out Meteor and installed GSAP through Atmosphere... https://atmospherejs.com/infinitedg/gsap I am trying this in my react component within meteor, but getting errors... I am sure I am selecting the node incorrectly. Do you guys have an example of how to call the Tween on the component? NOTE: I am very new to this meteor/react world import React from 'react'; export default class Home extends React.Component { componentDidMount () { var node = this.findDOMNode(); TweenMax.to(node, 2, {alpha:0}) }, render() { return ( <h1>Home</h1> ); } } Thanks!

Hi PointC, Yes, I have used ScrollMagic, it is a very nice animation framework. I guess I am looking for advice more towards using something like Meteor or Ember .... something that has routing and also allows for custom page transitions on routing requests.