Jump to content
Search Community

phsims

Members
  • Posts

    10
  • Joined

  • Last visited

phsims's Achievements

0

Reputation

  1. phsims

    Jumpy scaling in IE

    Hi rhernando, That was exactly what I needed. Worked perfectly. No I just need to figure out when one of the images keeps appearing in the middle of the slide change when all the sites are set to 0 opacity. Damn IE
  2. phsims

    Jumpy scaling in IE

    I cant seem to get the codepen to work http://cdpn.io/rnitv. Its there but the script isnt running, I am half asleep though so that may be the problem
  3. phsims

    Jumpy scaling in IE

    I have added force3D:true but its not helping. Trying to sort out a codepen, I have never done one before
  4. phsims

    Jumpy scaling in IE

    Hi Jonathan. thanks for getting back to me IE 11. I am using standard (default) view. I'm on windows7 I am using a windows load event. Will try to set up a codepen now.
  5. I have made an image slider for a site I am working on but thought it works in the other major brwosers it is jumpy in IE. You can see it in action here http://handrailcreations.co.uk/ function startAnimate(object) { var tl1 = new TimelineMax(), slideImg = jQuery('#inner-header').innerWidth(), slideImgH = jQuery('#inner-header').innerHeight(), slideF = slideImg/26, slideH = slideImgH/26, leftMove = Math.floor((Math.random()*3))* slideF - slideF, topMove = Math.floor((Math.random()*3))* slideH - slideH, left = leftMove.toFixed(0), top = topMove.toFixed(0); //alert(top); tl1.to(object, 1, {autoAlpha:1}, 'zoom') .to(object, 10, {scale:1.1, ease:Linear.easeNone}, 'zoom') .to(object, 10, {x: left , y:top, force3D:true, ease:Linear.easeNone}, 'zoom') .to(object, 1, {autoAlpha:0}) .to(object, 0, {scale:1, x:0, y:0, onComplete: endAnimation, onCompleteParams: [object], ease:Linear.easeNone}); } Any ideas? Thanks in advance
  6. Hi all, I have made an dynamic infinite slider containing animated text for a WP theme but am having some problems. The slider itslef works fine but trying to use a back button on the slider is causing problems. For some reason when I hit 'back' the first slide works OK but then on the second slide the text animation skips, then a while later the one of the functions (the one that moves the position of the of screen image) fails to fire and everything goes out of sync. I have tried reversing, play/pause and a bunch of other things but nothing seems to work. The JS is below and a version of the slider can be found at http://pm.demosite.me.uk/ jQuery(window).load(function(){ var tl1 = new TimelineMax(); var tl2 = new TimelineMax({onComplete: upDatePosition}); var tl3 = new TimelineMax(); var imgArray = []; var contentArray = []; var headArray = []; var subArray = []; var pArray = []; var imgLength = 0; var photoContWidth = 0; var imgWidth = 0; var n = jQuery("#ffslider li").length; var endArray = (n - 2) * '100' + '%'; var picWidth = jQuery(window).width(); var nextBtn = jQuery("button#next"); var prevBtn = jQuery("button#last"); //alert(imgLength); function setDefaults(){ // number of images imgLength = jQuery('#ffslider li img').length; // Full % width of slider photoContWidth = (imgLength * 100) + '%'; //looping through the image length and putting a button and assoc name attr to the btn for(var i=0; i<imgLength; i++){ jQuery('#ffslider li').eq(i).attr('id',i); jQuery('.slidercontent').eq(i).attr('name','slidecontent'+i); jQuery('.slidercontent h3').eq(i).attr('class','slidehead'+i); jQuery('.slidercontent h4').eq(i).attr('class','slidesub'+i); jQuery('.slidercontent p').eq(i).attr('class','slidep'+i); jQuery('#ffslider li').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent h3').eq(i).css('left', (i * 100) + "%"); jQuery('.slidercontent h4').eq(i).css('right', (i * 100) + "%"); jQuery('.slidercontent p').eq(i).css('left', (i * 100) + "%"); imgArray.push(jQuery('#ffslider li').eq(i)); contentArray.push(jQuery('.slidercontent').eq(i)); headArray.push(jQuery('.slidercontent h3').eq(i)); subArray.push(jQuery('.slidercontent h4').eq(i)); pArray.push(jQuery('.slidercontent p').eq(i)); } startAnimation(); } function startAnimation(){ tl1.to(contentArray, 0.1, {autoAlpha:1}) .add(TweenMax.to(headArray, 0.5, {left:"20" + '%', autoAlpha:1})) .add(TweenMax.to(subArray, 0.5, {left:"30" + '%', autoAlpha:1})) .add(TweenMax.to(pArray, 0.5, {left:"40" + '%', autoAlpha:1})) .add(TweenMax.to(headArray, 0.5, {left:"-100" + '%', autoAlpha:0, delay:3})) .add(TweenMax.to(subArray, 0.5, {left:"100" + '%', autoAlpha:0})) .add(TweenMax.to(pArray, 0.5, {left:"-100" + '%', autoAlpha:0})); endAnimation(); } function endAnimation(){ tl2.to(imgArray, 1, {left:'-=100' + '%', delay:7}) .to(contentArray, 0.1, {left:'-=100' + '%'}); } function upDatePosition(){ for( var i=0; i<imgLength; i++){ if((imgArray[i].css('left') <= '-picWidth')){ imgArray[i].css("left", (n - 1) * '100' + '%'); } if((contentArray[i].css('left') <= '-picWidth')){ contentArray[i].css("left", (n - 1) * '100' + '%'); } } startAnimation(); } function backDatePosition(){ for( var i=0; i<imgLength; i++){ if((imgArray[i].css('left') >= (n - 1) * '100' + '%')){ imgArray[i].css("left", '-100%'); } if((contentArray[i].css('left') >= (n - 1) * '100' + '%')){ contentArray[i].css("left", '-100%'); } } tl3.to(imgArray, 0.1, {left:'+=100' + '%'}).to(contentArray, 0.1, {left:'+=100' + '%'}); startAnimation(); } setDefaults(); nextBtn.click(function(){ tl1.totalTime( tl1.totalDuration() ); tl2.totalTime( tl2.totalDuration() ); }); prevBtn.click(function(){ tl1.totalTime( tl1.totalDuration() ); tl2.seek(0); backDatePosition(); }); });
  7. I am using greesock and superscrollorama and I am having a problem with animating some sections of my site. Uncaught TypeError: Cannot read property 'top' of undefined jquery.superscrollorama.js:99 checkScrollAnimjquery.superscrollorama.js:99 tickHandlerjquery.superscrollorama.js:63 s.dispatchEventTweenMax.min.js:16 f Everything works perfectly on my localhost but I keep getting the same error when on a live site. you can see it here http://efc.demosite.me.uk/ Any help would be much appreciated thanks
  8. phsims

    Noobie needs help!

    Hi and thanks for the response. Sorry I dont have anything live yet, its all on my localhost. I have set up the WP parallax theme so that the end user can choose the animation they want from a drop down. The idea is that they can choose to make a title fade/spin etc and the correct class is then applied to the title. That works fine but on single pages but on the onpage parallax they all use the same class and fire at the same time. I have grabbed the code straight from the simple demo source (this is the link for the main demo) http://johnpolacek.github.io/superscrollorama/ <h2 id="fade-it">Fade It</h2> $(document).ready(function() { var controller = $.superscrollorama(); // individual element tween examples controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); }); What I want to do is swap out the ID for Classes and have multiple all triggered separately once the scroll into view and fade out again when you scroll past. <h2 class="fade-it">Fade It</h2> (fires when scrolled into view) lots of txt here.... <h2 class="fade-it">Second Fade It</h2> I hope thats clearer.
  9. phsims

    Noobie needs help!

    Hi all, I am currently working on a onepage parallax wordpress site for a client, he spotted a site that had a load of cool effects and wants them adding to his site. That led me to superscrollorama which led me here. I am trying to recreate some of the effects from the superscrollarama demo site on the the clients site. I want to be able to use the same effect on numerous classes and have them trigger when they scroll into view and reverse when scrolling out of view (as they do on the demo site). Unfortunately ALL of them trigger at the same time (when the first class comes into view) and they dont reverse out again. Below is the code from the superscrollarama demo site // individual element tween examples controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); I am completely new to this, and am at a loss. Any help/advice would be much appriciated.
×
×
  • Create New...