CICStoke
-
Content Count
7 -
Joined
-
Last visited
-
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
- 6 replies
-
- 1
-
-
- each loop
- timelinemax
- (and 2 more)
-
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
-
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:'+100p
-
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
-
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 .s