Jump to content


  • Posts

  • Joined

  • Last visited

  1. Hi Carl, really sorry for the late reply. I took onboard what you said, went off and sort of lost myself down the rabbit hole of this site I'm building. Apologies. Totally understand what you advised and kick myself for not realising it heh. I've worked around it using a trick that Jonathan (I think) posted which is: tl.set(subMenu, {height:"auto"}); tl.from(subMenu, 0.3, {height:0}, 0); Works great and no issues. Thanks for your time in making the video to clarify the issue .
  2. Hi guys, I have a weird issue that has popped up. I'm obviously missing something glaringly obvious but its stumped me. I have created a simple accordion menu and created 2 tweens on a timeline: tl = new TimelineLite(); tl.to(currOpenSub, 1, {maxHeight:0}); tl.to(subMenu, 1, {maxHeight:600}, 0); ..but despite me marking the second tween to start at 0 it waits until the first tween is complete before firing. I've never come across this before with Tweenlite/Tweenmax so what am I missing here? Thanks for any advice and help guys .
  3. Got it. Read It. Understood. Thanks Jonathan, that has helped me greatly . ....and Jack. You got in there while I was replying, many thanks.
  4. Ok an update to this that will hopefully save some people some time in future. I implemented PointC's force3D:false into my code/page and it had no effect. I then spent the next four hours going through line by line of my CSS and script to see if there was anything that could be causing issues. There was. Backface-Visibility. For me, whenever the expanding circle reaches an element that has -webkit-backface-visibility:hidden assigned to it in the CSS the scaling circle immediately jumped into a pixelated mess. If I remove it, no more pixelated scaling circle. It only happens on elements that have been taken out of the document flow using position: relative, absolute etc. PointC did solve my codepen problem but due to me not understanding what the cause of the actual pixelation was he solved the wrong problem lol. If I remove force3D: false from my script there is no pixelation in Webkit now that the backface-visibility rules have been removed from the CSS. So, hopefully this helps save someone some time and thanks to PointC again for his help. Now if I could only get the scale to work fine without having to remove backface-visibility.....
  5. Thanks PointC . I could have sworn I tried force3D false as one of my first attempts to fix but due to it being such a long day I think I only had it on the from section doh! Thanks so much for your help .
  6. Hey Guys, I've run into an issue with a scale animation on an element as can be seen in my Pen if viewed in a webkit browser. Firefox is fine. During the animation the edges of the element blur and pixelate but re-assemble on animation completion. I've been scratching my head and nothing I've found elsewhere on the web has worked e.g backface-visibility: hidden, translateZ(0) etc etc. I'm sure there must be an easy fix for this I just can't seem to nail it. Any help is appreciated please. Thank you!
  7. Hmm so I put together a Pen but can't reproduce this issue. I'll have to take apart my code bit by bit to see what's causing it.
  8. Hi guys, I'm using the CSSRule plugin and have run into an issue that seems only present in Chrome. FF and Safari are fine. In my stylesheet I have the following rule: .cloned:after {content: '';position: absolute;z-index: -1;width: 100%;height: 100%;opacity: 0;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);} ...and in my script I have the following: shadow = CSSRulePlugin.getRule(".cloned:after"); (...referenced in a timeline later as below) .to(shadow, 0.4, {cssRule:{opacity:1}}, 0.5) On Firefox and Safari if I print out to console.log I see the rule as expected and everything works fine yet in Chrome I see: "Undefined" and then "Uncaught Cannot tween a null target" which halts the animation due to the error. If there was an error in the code surely FF and Safari would pick it up as well but they have no issue. It's Chrome specific. I'm literally on my way out the door so will make a codepen when i get back in a couple of hours, apologies for not doing now. Thanks!
  9. Works perfect, appreciate your time Blake many thanks .
  10. Sorry I should have said, I'm seeing this behaviour in Firefox 46.01. Chrome is fine. In FF if you scroll down the screen until just the bottom of the boxes are visible and click one it jumps into position rather than animates.
  11. Hmm looks like I spoke too soon. I've been playing with this for a few hours but my main problem is that if the page is any longer than 100% of viewport then the divs don't work properly they just jump. I've made a minor adjustment to a fork of your codepen to show the issue: http://codepen.io/anon/pen/vKEdOb I'm obviously missing something glaringly obvious and easy I just don't know what it is .
  12. Hi Guys, I'm trying to work out how to move an element from the normal flow into the absolute center of the viewport. You can see what I'm trying to achieve here: http://codepen.io/anon/pen/gMbxEy ...but the problem is that: a ) as soon as the position is changed to absolute it jumps out of position (obviously ;P) b ) the remaining elements shift to accommodate the space left behind by the animating element. Basically I want everything to stay in place except the div I'm animating and I want it to animate from its existing position not the position it then takes up once the position is switched to absolute. Any advice on how best to achieve this would be much appreciated. Many thanks.
  13. Hi Jack. Thanks so much for replying and yes you were absolutely right of course. Moving the variable declarations inside the function fixed it perfectly. So simple I kicked myself . I'll make sure any future questions come with a codepen to help. Thanks again!
  14. Hi Guys, I have a page with a CSS animation on entry that slides in some content. I also have a scroll to ID snippet as follows: var footer = document.getElementById("footer"); var footerTop = footer.offsetTop; function gotoFooter() { TweenLite.to(window, 1.5, {scrollTo:(footerTop), ease:Power4. easeInOut}); } ...however due to the CSS animation that starts on entry my scrollto is wildly off and in fact just slams into the end of the page with an unseemly stop. My question is, is there a way to update the new page length for the plugin after my animation finishes (its 2 seconds long). Thanks for any help, I'm just starting to learn this library so please be gentle .