pjgulo

Hi, Thank you, I know I'm trying something very complicated. More or less it is repeating the function according to the number of elements. Since there are, for example, 4 elements, the code to repeat would be: /* repeat el.length; comienza el primero y termina, pasando al segundo, etc. */ // element 01 r.to(el[0], { maskSize: "200%" }, "firstMask") .fromTo(el[0].querySelector(".image"), { scale: 1.25 }, { scale: 1 }, "firstMask").add((function () { return el[0].classList.add("active") } ), "firstMask+=0.4") // element 02 r.to(el[1], { maskSize: "200%" }, "secondMask") .fromTo(el[1].querySelector(".image"), { scale: 1.25 }, { scale: 1, }, "secondMask").add((function () { return el[1].classList.add("active") } ), "secondMask+=0.4") // element 03 r.to(el[2], { maskSize: "200%" }, "thirdMask") .fromTo(el[2].querySelector(".image"), { scale: 1.25 }, { scale: 1 }, "thirdMask").add((function () { return el[2].classList.add("active") } ), "thirdMask+=0.4") // element 04 r.to(el[3], { maskSize: "200%" }, "lastMask") .fromTo(el[3].querySelector(".image"), { scale: 1.25 }, { scale: 1 }, "lastMask").add((function () { return el[3].classList.add("active") } ), "lastMask+=0.4") /* END repeat */ And I have solved it like this, since I don't know how to do it 100% with gsap, like this: /* Repeat */ for (let c = 0; c < el.length; c++) { r.to(el[c], { maskSize: "200%" }, c + "Mask") .fromTo(el[c].querySelector(".image"), { scale: 1.25 }, { scale: 1 }, c + "Mask").add((function () { return el[c].classList.add("active") } ), c + "Mask+=0.4"); } /*END repeat */ I can add the number of elements I want in the DOM without changing the js. It works, which is what is important!!! hehehehe Thank you very much for everything and magnificent tools!!! All the best,

Good morning, Thank you for your tools, sorry how I write English and ask you for help. I am a newbie with your tools since I usually do animation with js and css directly and using your tools I think I would do more, less time, etc. I am trying to make a reveal with a mask-image from the scroll. Something similar to what appears on this website: axelvanhessche.com. But, from the code I attached, it only does it for one element. In other codes that I have tried, it does them at the same time in all of them or perhaps the element that the class has to add is not defined. By logic, you should do the first element and when finished, the second, and so on in the timeline with all the elements. The code I'm trying to make is to count all the elements in the DOM as containers so I don't have to change the js for each page. But I don't use tools well. // This code only performs the first element /* -- SCROLL for each content items -- */ gsap.utils.toArray(".items").forEach(function (e, i) { /* -- scrollTrigger -- */ var r = gsap.timeline({ scrollTrigger: { trigger: e, scrub: .5, pin: !0, start: "top top", end: function () { return "+=".concat(4 * window.innerHeight) }, onEnter: function ({ direction, isActive }) { if (isActive == true) { } }, pinSpacing: true, defaults: { ease: "none" } } }); /* -- END scrollTrigger -- */ /* -- mask, scale and active for each item -- */ var el = gsap.utils.toArray(".item"); var p = el[i]; gsap.set(el, { zIndex: (i) => i + 1 }); r.set(p, { maskSize: "0%", }) /* repeat el.length; comienza el primero y termina, pasando al segundo, etc. */ r.to(p, { maskSize: "200%", stagger: 0.4 }, "first") .fromTo(p.querySelector(".image"), { scale: 1.25 }, { scale: 1, stagger: 0.4 }, "first").add((function () { return p.classList.add("active") } ), "first+=0.4"); /* END repeat */ console.log(p, el[i], el.length); /* -- END mask, scale and active for each item -- */ }); I hope I have explained myself well and that you could help me to get to know EVERYTHING better. Thanks so much, I wait for your answer. All the best,

Thanks for all. Thanks for resolving it!

Thanks for everything! I did it as you advised and solved, ? One more question: Can I change the reverse ease and duration of the same function? That is, view.play with ease1 and duration1. While in play.reverse, modify to ease2 and duration2. e.getAttribute("id") === "view" ? this.view().reverse() /* ease02 and duration02 -> change here these var */ : this.view().play() /* ease01 and duration01, initial */ Thanks again! ?

Good morning, First of all thanks for everything, I am going to review the cogigo, modify to GSAP3 and hope to get it. Thanks, All the best.

Hi, Thanks for the help. I will try to simplify the code and better with the migration. I recognize that it is somewhat complex, but it is where I arrive. My problem is function "hover_linkViews()": "this.view().reverse()" no work to return the images to their initial position (distributed throughout the page), but "this.view().play()" OK because all the images go to the same point (button name 02). // Line 120 JS Codepen.io e.getAttribute("id") === "view01" ? this.view().reverse() /* not work */ : this.view().play() /* work */ Thank you very much again everything! ?

Good morning! Sorry, I have no contact with codepen.io; the best that I could. https://codepen.io/pjgulo/pen/WNjELyg My question to call "play" or "reverse" within a function. function 01(){ new timelineMax01 function 02(){ new timelineMax02 } } document.querySelector('a').addEventListener('mouseenter', (e) => { // call timelineMax01 play o reverse // call timelineMax02 play o reverse }); Thank you very much again!

Thank you first of all. I'm going to see the migration. I want to know how to call "timelineMax" ("play" or "reverse") within a function or a function within another (example that I puted). Two buttons to view a gallery differently, adding or removing a class to the buttons. Gsap is activated when clicking button02 (play), but reverse when clicking button01 (reverse). I attach gif by link Dropbox: https://www.dropbox.com/s/55o1qb0ilq90k1j/gallery.gif?dl=0 Thanks again,

Hi. Sorry for my english. I am very new to animation and the web. I have always made animations by css and I want to know more about GSAP; amazing! I have this function to call timelineMax. According to the button "play" or "reverse". But "reverse" does not work! I think it does not call the function. I try it directly with the function "this.view.reverse ()" or "this.view01" (I have read it for other topics). Why doesn't it work? /* view */ function hover_linkViews(e){ this.view = function() { var item = document.querySelectorAll('.item, #h-s-01 li>div:first-child'); var title = document.querySelectorAll('.h-1-title'); var subhead = document.querySelectorAll('.h-1-subhead'); const itemlandscape = document.querySelector('.item.img-landscape:first-child'); const itemlandscapewidth = document.querySelector('.item.img-landscape:first-child').getBoundingClientRect().width; const itemportraitwidth = document.querySelector('.item.img-portrait:first-child').getBoundingClientRect().width; const itemlandscapeheight = document.querySelector('.item.img-landscape:first-child').getBoundingClientRect().height; const itemlandscapestyle = getComputedStyle(itemlandscape); const itemlandscapestylemarginRight = parseFloat(itemlandscapestyle.marginRight); const itemlandscapestylemarginBottom = parseFloat(itemlandscapestyle.marginBottom); const itemmargintop = document.querySelector('.item.img-h-m:first-child'); const itemmargintopstyle = getComputedStyle(itemmargintop); const itemmargintopstylemarginTop = parseFloat(itemmargintopstyle.marginTop); TweenMax.killTweensOf(item); TweenMax.killTweensOf(title); TweenMax.killTweensOf(subhead); this.tl = new TimelineMax({ paused: true, reversed: true, onComplete: function() { TweenLite.set("#h-s-01", { clearProps: "all" }); }, onReverseComplete: function() { TweenLite.set("#h-s-02", { clearProps: "all" }); } }).addLabel("initial") .set(".h-1-title, .h-1-subhead", { pointerEvents: "none" }).staggerTo(item, .6, { filter: 'grayscale(100%)', webkitFilter: 'grayscale(100%)', left: function(i, target) { return document.getElementById("h-s-01").getBoundingClientRect().right - itemlandscapewidth - 20 }, top: function(i) { if (window.innerWidth == 768) { return i < 5 ? 0 : (-1 * itemmargintopstylemarginTop) } else { return item[i].classList.contains("img-h-m") ? (-1 * itemmargintopstylemarginTop) : 0 } }, width: function(i) { if (item[i].classList.contains("img-portrait")) { return itemlandscapewidth } }, height: function(i) { if (window.innerWidth > 768) { return (2 * (itemlandscapeheight + itemlandscapestylemarginBottom)) } else { return (itemlandscapeheight + itemlandscapestylemarginBottom) } }, ease: Power1.easeInOut }, 0.06, "initial").staggerTo(".h-3-li-w", .6, { yPercent: [-101, 0], ease: Power1.easeInOut }, 0.06, "initial").staggerTo(".h-3-info-0 div div, .h-3-info-1 div", .6, { yPercent: [-101, 0], ease: Power1.easeInOut }, 0.06, "initial") return this.tl; }, this.view02 = function() { document.getElementById("h-s-01").style.zIndex = "1"; document.getElementById("h-s-02").style.zIndex = "1"; document.querySelectorAll(".nav-no-w>div").forEach((el) => { el.classList.remove("on") }); this.DOM.el.querySelector('div').classList.add("on"); document.body.setAttribute("data-numberview", "02"); }, this.view01 = function() { this.tlView = this.view(); this.tlView.reverse(); document.getElementById("h-s-01").style.zIndex = "1"; document.querySelectorAll(".nav-no-w>div").forEach((el) => { el.classList.remove("on") }); this.DOM.el.querySelector('div').classList.add("on"); document.body.setAttribute("data-numberview", "01"); return this.view01; }, this.initEvents = function() { this.clickFn = (ev) => { e.getAttribute("id") === "view01" ? (this.view01(), this.view().reverse()) : (this.view02(), this.view().play()) // here call play, but NOT reverse }; this.DOM = { el: e }; this.DOM.el.addEventListener('click', this.clickFn); }, this.initEvents() } document.body.getAttribute("data-namespace") === "images" && window.innerWidth >= 768 && [...document.querySelectorAll('.nav-no-w')].forEach(link => new hover_linkViews(link)); Another question I have is how to work with timelineMax and functions within others. Example: function 01(){ new timelineMax01 function 02(){ new timelineMax02 } } document.querySelector('a').addEventListener('mouseenter', (e) => { // call timelineMax01 play o reverse // call timelineMax02 play o reverse }); Thank you,