Jump to content
Search Community

Rakesh Roy

Members
  • Posts

    5
  • Joined

  • Last visited

Everything posted by Rakesh Roy

  1. Thanks @Shaun Gorneau for quick reply and live example. Though i am having some different issue. Scenario: A grid full of portfolio images with link to their own page. which will lead to their page by Barbajs functionality. What I want: When any portfolio image clicked the image must scale from the current position* and then easeOut** when the new content loaded in background using barbajs . Issue: When i scale the image the position is not suitable and effect is not good. * position : Image must scale from the current position not Example Start to Example Processing to Full Screen image with center Position ** I will code the barbajs part just need the animation part If you give me some example how i can archive this animation. Example site : https://antoni.de/cases/ (If you scroll the slider and the click on the most right or left video , you can see the video scale from the current position of the element) Thanks.
  2. Hi this is my website http://gallarii.appycodes.com/portfolio I wan to built the effect like this example site: https://antoni.de/cases/ When user clicks on the thumb image the image must scale to full page and then load new page can you give me hint how to proceed. My js file : http://gallarii.appycodes.com/wp-content/themes/generatepress/bbc-working.js?ver=4.9.8 var PortFolioTransition = Barba.BaseTransition.extend({ start: function() { this.originalThumb = lastElementClicked; Promise .all([this.newContainerLoading, this.enlargeThumb()]) .then(this.showNewPage.bind(this)); }, enlargeThumb: function() { var deferred = Barba.Utils.deferred(); var thumbPosition = this.originalThumb.getBoundingClientRect(); // this.cloneThumb = this.originalThumb.cloneNode(true); // this.cloneThumb.style.position = 'absolute'; // this.cloneThumb.style.top = thumbPosition.top + 'px'; // this.oldContainer.appendChild(this.cloneThumb); var image = $(this.originalThumb).find("img"); var tl = new TimelineLite({onComplete:deferred.resolve()}); tl .timeScale(0.2) .set(image , { autoAlpha: 1, "z-index":"9999999" }) .fromTo(image,1, { scale: 1, }, { scale:5, top:0 }) return deferred.promise; }, showNewPage: function() { var TTLite = new TimelineLite({ onCompleteScope: this, onComplete: function() { this.done() , afterDomReloaded() } }); TTLite.set([this.oldContainer, this.newContainer], { position: "absolute", top: 0, left: 0, width: "100%" }).set(this.oldContainer, { autoAlpha: 0 }).set(this.newContainer, { autoAlpha: 1 }).set(this.newContainer, { clearProps: "position, top, left, width" }) } }); Please help me if , Thanks or give me some info how to start
  3. Thanks, your code clear all my doubts. Its fun using greensock.
  4. Hi All, I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr , i want to make the effect with barbajs and #GSAP . Can Someone help with some code example.
×
×
  • Create New...