CICStoke

Hi Carl, Yes I have just set one up: https://codepen.io/dansbananaloaf/pen/WZpzjM The pen shows that after the first scroll of the wheel it works as expected (and the reverse also works nicely) However, after the first slide, if you try to advance it falls over. I'm looking for some reusable code that will work across all slides. I hope I'm most of the way there. If you can help that would be a amazing.

HI guys, I'm trying to create a horizontal scrol with a swipe animation similar to : http://cuberto.com/ I would like to move from one section to the next using a div that expands to 100% from the left edge then disappears to the right. Then another div comes in from the left and stops at 50%.

Thanks Blake, this worked great

Hi PointC (Craig), I've modified the code similar to the one on code pen : if (window.matchMedia("(min-width: 767px)").matches) { var ctrl = new ScrollMagic.Controller({ globalSceneOptions:{ triggerHook: 0.75, addIndicators:true } }); var $elements = $('.bcg-parallax'); $(".bcg-parallax").each(function(i){ var element = $elements[i]; var tl = new TimelineMax(); tl.from(element + " .content-parallax", 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4) .from(element + " .bcg", 1.8, {y:'-20%', ease:Power0.easeNone},0) new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.75, duration: '50%' }) .setTween(tl) .addTo(ctrl) }); } However this throws an error in the console: Uncaught Error: Syntax error, unrecognized expression: [object HTMLDivElement] .content-parallax at Function.Sizzle.error (jquery.js:1473) at Sizzle.tokenize (jquery.js:2087) at Sizzle.select (jquery.js:2488) at Function.Sizzle [as find] (jquery.js:879) at jQuery.fn.init.find (jquery.js:2704) at jQuery.fn.init (jquery.js:2821) at Function.jQuery [as selector] (jquery.js:73) at new <anonymous> (TweenMax.min.js:16) at Function.D.from (TweenMax.min.js:17) at s.d.from (TweenMax.min.js:14) I'm guessing that your code works and mine doesn't because the splittext function parses are jQuery object into something more palatable for TimelineMax to use. Any idea how to parse a simple jquery selection to work in a timeline? Thanks Dan

Hi I'm trying to work out why this code isn't working. I would like to scan the document to find every instance of and element with a class of bcg-parallax and then run the code below: if (window.matchMedia("(min-width: 767px)").matches) { var controller = new ScrollMagic.Controller(); $(".bcg-parallax").each(function(i, item){ var newIndex = i + 1; var itemRef = '.bcg-parallax:nth-of-type(' + newIndex + ')'; var parallaxTL = new TimelineMax(); parallaxTL.from(itemRef + '.bcg-parallax .content-parallax', 0.4 , {autoAlpha: 0, x:'+100px', ease:Power0.easeNone},0.4) .from(itemRef + ' .bcg', 1.8, {y:'-50%', ease:Power0.easeNone},0); new ScrollMagic.Scene({ triggerElement: item, triggerHook: 1, duration: '100%' }) .setTween(parallaxTL) .addIndicators() .addTo(controller) }); } I'm using the css rules plugin, but this code at this time is hiding the first instance of the .content-parallax and thats it. It is not firing any events at the point of scroll. Basically I want the animation to be relative to the elements position on the page. Any ideas, I'm really struggling. Thanks

Hi Carl, I'm trying to replicated the swipe on page. I would like to use dynamic selectors for this and I am adding a class as a reference to a state. However I believe that dynamic selectors aren't accepted in the time time. Could I create a function thats called with the timeline in and the selector will be dynamically updated inside the function each time it's call? heres a bit of the code, I would love it if thisSlide and nextSlide variables would refresh once the they have changed in the timeline. Is there a way for call the timeline multiple times and passing the variable in on the call? Sorry I know I'm trying to be ambitious here. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } var thisSlide = ".currentSlide"; var thisSlideIndex = $('.slide').index($(thisSlide)); var nextSlideIndex = thisSlideIndex; var nextSlide = ".slide:nth-child(" + nextSlideIndex + ")"; var nextSlideText = $(nextSlide + ' .sideDetails ul li:nth-child(2)').text(); tl .set(nextSlide + " .sideDetails", {width: "0"}) .to(thisSlide + " .sideDetails", .3,{ width: "100%", ease: Power2.easeInOut}) .to(thisSlide + " .detailsText", .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(thisSlide,{ background: "none"}) .fromTo(thisSlide + " .sideDetails", .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .set(nextSlide + " .sideDetails", {x:"0%"}) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(thisSlide,{zIndex:1- i, className:'-=currentSlide'}) .set(nextSlide,{zIndex:slides.length, className:'+=currentSlide'}) .to(nextSlide + " .sideDetails", .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(nextSlide + " .detailsText", .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; function GO(e){ var SD=isNaN(e)?e.wheelDelta||-e.detail:e; if(SD<0){tl.play()}else{tl.reverse()}; }; document.addEventListener("mousewheel",GO); document.addEventListener("DOMMouseScroll",GO); document.getElementById('nextBtn').addEventListener("click",function(){GO(-1)}); document.getElementById('prevtBtn').addEventListener("click",function(){GO(1)});

Hi I'm trying to replicated the transitions on this pages sections http://cuberto.com using TweenMax. var slides=document.querySelectorAll('.slide'); var tl=new TimelineLite({paused:true}); for(var i=slides.length;i--;){ var D=document.createElement('div'); D.className='Dot'; D.id='Dot'+i; D.addEventListener('click',function(){ tl.seek(this.id).pause() }); document.getElementById('Dots').appendChild(D); tl.add('Dot'+i) if(i>0){ if(i!=slides.length-1) { tl.addPause() } tl .set(slides[i-1].getElementsByClassName("sideDetails"), {width: "0"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {width:'50%'},{ width: "100%", ease: Power2.easeInOut}) .to(slides[i].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60", ease: Power2.easeInOut},0) .set(slides[i],{ background: "none"}) .fromTo(slides[i].getElementsByClassName("sideDetails"), .3, {x: "0%"},{ x: "100%", ease: Power2.easeInOut}, .3) .to('#Dot'+i,.7,{backgroundColor:'rgba(255,255,255,0.2)'},'L'+i) .set(slides[i],{zIndex:1-i}) .set(slides[i-1],{zIndex:slides.length}) .to(slides[i-1].getElementsByClassName("sideDetails"), .3,{width: "50%",ease: Power2.easeInOut}, .6) .fromTo(slides[i-1].getElementsByClassName("detailsText"), .3, {opacity: "0", y:"-=60" }, {opacity: "1", y:"0",ease: Power2.easeInOut},.6) }; }; full code at codepen can be found here I'm basically trying to transition between a bunch of sliders with a swipe animation, I have alternated the element i would like to transition on each slide in black or pink so I can see the animation. I can seem to isolate the animation to the current slide - in essence I want the left hand div to grow to 100%, then animate off the page to the right, then switch to the next slider and animate the left hand dive to a width of 50% from an initial state of 0. I believe that is what the Cuberto site is doing. However I am getting in an awful mess with the scroll event firing an animation on all the slides. I'm not particularly competent with vanilla javascript but would like to attempt this with or without jQuery. I have tried pagepiling.js and fullpage.js but this doesn't achieve the effect I'm looking for. I could really do with a a resolution I can go to my client with, or at least a direction I could go in. Thanks javascript jquery horizontal-scrolling gsap pagepiling.js shareeditdeleteflag asked 4 mins ago DansBananaLoafcake 62 add a comment