Jump to content

martis last won the day on July 28 2012

martis had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by martis

  1. @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...
  2. I've been using a mix of both ScrollMagic and custom functions. Wanted to see what else people may be using and why. Thanks!
  3. Thanks guys, Doing the transform in the SVG object itself worked. Weird that it would not transform it using JS...
  4. 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
  5. martis

    translate and x/y

    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
  6. martis

    translate and x/y

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

    translate and x/y

    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
  8. Trying to unclaim this topic but it's not working... :\
  9. Thanks for the info Jonathan! It's definitely specifically related to Chrome.... Firefox and Safari run smooth as ever
  10. I will do more testing and see if I can simplify the issue
  11. 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!
  12. 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
  13. Thanks guys, appreciate the responses as usual!
  14. Hey all, If I have image assets that do not have transparency, which will perform better in the browser, JPG or PNG? Thanks!
  15. 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...
  16. 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!
  17. Thanks Carl! This worked like a dream
  18. 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!
  19. 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!
  20. 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!
  21. 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.
  22. Hey guys, I run into sites that have great page transitions and are what I think are 'single page sites'. (ie http://humans-machines.com/ ) I understand how to build HTML, CSS, JS files, but I am not too familiar with building single page experiences... My question is... whats a good single page framework to start with knowing the goal is to build in custom page transitions using GSAP? Thanks!
  23. Thanks Blake! Ended up doing exactly that... Kind of a lot of overhead having to do separate tween calls for objects of objects, but such is life Took a look at the pixi plugin, awesome solution, may be a little beyond my knowledge/time at the moment.
  24. Having trouble finding an example of working with Three.js properties? Example line.rotation.y TweenMax.to(line1, 1, {rotation.y:180}); // does not like the .y Thanks!
  25. Yes, I tried adding overflow:visible... did not work sadly