ÿÈÕ´óÈüapp

✕

bbdeveloper

// const popupHTML = ` // // `; // $('body').append(popupHTML); // // Load shortcode content via Ajax (optional) // $('#popupContent').html(''); // // Open popup on button click // $('#openPopup').on('click', function() { // $('#customPopup').fadeIn(); // }); // // Close popup on overlay or close button click // $('body').on('click', '#closePopup, #customPopup', function(e) { // if (e.target.id === 'customPopup' || e.target.id === 'closePopup') { // $('#customPopup').fadeOut(); // } // }); // }); // ---------------------- Test Moving Icons (JS) ---------------------- // jQuery(function($) { gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".box", { xPercent: -550, yPercent: -1500, scale: 2.5 }, { xPercent: 0, yPercent: 0, scale: 1, ease: "power2.out", scrollTrigger: { trigger: ".main-banner", markers: false, start: "top 0%", // when box enters the viewport end: "bottom 100%", // adjust as needed scrub: true // scrub ties scroll position to animation } } ); }); jQuery(function($) { gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".box-2", { xPercent: 0, yPercent: -1700, scale: 2.5 }, { xPercent: 0, yPercent: 0, scale: 1, ease: "power2.out", scrollTrigger: { trigger: ".main-banner", markers: false, start: "top 0%", // when box enters the viewport end: "bottom 100%", // adjust as needed scrub: true // scrub ties scroll position to animation } } ); }); jQuery(function($) { gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".box-3", { xPercent: 800, yPercent: -1500, scale: 2.5 }, { xPercent: 0, yPercent: 0, scale: 1, ease: "power2.out", scrollTrigger: { trigger: ".main-banner", markers: false, start: "top 0%", // when box enters the viewport end: "bottom 100%", // adjust as needed scrub: true // scrub ties scroll position to animation } } ); }); // ---------------------- Smooth Scroll (JS) ---------------------- // jQuery(function($) { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2.25, -10 * t)), }); function raf(time) { lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf); }); // ---------------------- Stacked Cards (JS) ---------------------- // console.clear(); const cards = gsap.utils.toArray(".card"); const spacer = 0; const minScale = 1; const distributor = gsap.utils.distribute({ base: minScale, amount: 0 }); cards.forEach((card, index) => { const scaleVal = distributor(index, cards[index], cards); // Animation with scroll gsap.to(card, { scrollTrigger: { trigger: card, start: `top top`, scrub: true, markers: false, snap: [0, 0.33, 0.5, 0.66, 1], invalidateOnRefresh: true }, ease: "none", scale: scaleVal }); // Pin and active class management ScrollTrigger.create({ trigger: card, start: "top-=100 top", // Offset the pin start by 100px endTrigger: ".cards", pin: true, pinSpacing: false, // markers: { indent: 0 }, id: "pin", invalidateOnRefresh: true, onEnter: () => card.classList.add("active"), onLeave: () => card.classList.remove("active"), onEnterBack: () => card.classList.add("active"), onLeaveBack: () => card.classList.remove("active") }); }); // ---------------------- Scroll Horizontal (JS) ---------------------- // // gsap.registerPlugin(ScrollTrigger); // let sections = gsap.utils.toArray(".slide"); // gsap.to(sections, { // xPercent: -100 * (sections.length - 1), // ease: "none", // scrollTrigger: { // trigger: ".horizontal-sliders", // pin: ".main1", // pinSpacing: true, // scrub: 1, // end: "+=1000", // } // }); // gsap.to('.next-block',{ // backgroundColor:'tomato', // scrollTrigger:{ // trigger:'.next-block', // pinnedContainer: ".main", // start:'top 50%', // toggleActions: 'play none reset none', // } // }) // ---------------------- Scroll Text (JS) ---------------------- // const horTextAnimation = () => { // Kill only the specific ScrollTrigger if it exists const existingTrigger = ScrollTrigger.getById("horizontalTextScroll"); if (existingTrigger) existingTrigger.kill(); // TARGET ELEMENT const horText = document.querySelector(".section-scroll-text h1"); if (horText) { // ANIMATION gsap.to(horText, { x: () => -(horText.offsetWidth - window.innerWidth), ease: "linear", scrollTrigger: { id: "horizontalTextScroll", // Unique ID to target this ScrollTrigger trigger: ".section-scroll-text", pin: true, scrub: true, invalidateOnRefresh: true, end: () => `+=${horText.offsetWidth - window.innerWidth}` } }); // REFRESH ScrollTrigger.refresh(); } }; // RUN ANIMATION horTextAnimation(); // RESPONSIVE window.addEventListener("resize", horTextAnimation); // ---------------------- Add More Scroll Text (JS) ---------------------- // jQuery(function($) { gsap.registerPlugin(ScrollTrigger); // Set initial positions (off-screen right) gsap.set(".img1", { x: 0, y: 2000, opacity: 0 }); gsap.set(".img2", { x: 450, y: 2000, opacity: 0 }); gsap.set(".img3", { x: 900, y: 2000, opacity: 0 }); gsap.timeline({ scrollTrigger: { trigger: ".section-slide-up", // start: "top center", start: "top-=600 top", markers: false, once: true } }) .to(".img1", { x: 0, y: 0, opacity: 1, duration: 1, ease: "power2.out" }) .to(".img2", { x: 450, y: 0, opacity: 1, duration: 1, ease: "power2.out" }, "+=0.3") .to(".img3", { x: 900, y: 0, opacity: 1, duration: 1, ease: "power2.out" }, "+=0.3"); }); // ---------------------- Add More Scroll Text (JS) ---------------------- // // const horTextAnimation = () => { // // Kill existing ScrollTriggers // const triggerIDs = [ // "horizontalTextScroll", // "imageScroll1", // "imageScroll2", // "imageScroll3" // ]; // triggerIDs.forEach(id => { // const existingTrigger = ScrollTrigger.getById(id); // if (existingTrigger) existingTrigger.kill(); // }); // // Animate the main scrolling text // const horText = document.querySelector(".section-scroll-text h1"); // if (horText) { // gsap.to(horText, { // x: () => -(horText.offsetWidth - window.innerWidth), // ease: "linear", // scrollTrigger: { // id: "horizontalTextScroll", // trigger: ".section-scroll-text", // pin: true, // scrub: true, // invalidateOnRefresh: true, // end: () => `+=${horText.offsetWidth - window.innerWidth}` // } // }); // } // // Image configs: {selector, endX} // const images = [ // { selector: ".img1", endX: 100 }, // { selector: ".img2", endX: 300 }, // { selector: ".img3", endX: 500 } // ]; // images.forEach((img, index) => { // const el = document.querySelector(img.selector); // if (el) { // gsap.fromTo(el, // { // x: window.innerWidth + (index * 100), // opacity: 0 // }, // { // x: img.endX, // opacity: 1, // ease: "power1.out", // scrollTrigger: { // id: `imageScroll${index + 1}`, // trigger: ".section-scroll-text", // start: `top+=${index * 100} top`, // trigger one by one // scrub: true, // end: "+=300", // invalidateOnRefresh: true // } // } // ); // } // }); // ScrollTrigger.refresh(); // }; // horTextAnimation(); // window.addEventListener("resize", horTextAnimation); // Process each `[animate]` element independently document.querySelectorAll('[animate]').forEach(section => { // Initialize SplitType for the current section let typeSplit = new SplitType(section, { types: 'lines, words', tagName: 'span' // Wrap each line and word in a }); // Create GSAP animation for each section gsap.fromTo( section.querySelectorAll('.line'), // Target lines inside the current section { filter: 'blur(15px)', // Start with a blur opacity: 0, // Start with opacity 0 }, { filter: 'blur(0px)', // Animate to no blur opacity: 1, // Animate to full opacity duration: 1, ease: 'power1.out', stagger: 0.1, scrollTrigger: { trigger: section, // Trigger animation for this specific section start: 'top center', // Start when the section reaches the center of the viewport once: true // Ensure the animation runs only once } } ); }); // ---------------------- Slick Slider (JS) ---------------------- // $(document).ready(function() { $(".Modern-Slider").slick({ autoplay: false, autoplaySpeed: 9000, speed: 500, mobileFirst: true, slidesToShow: 1, slidesToScroll: 1, pauseOnHover: false, respondTo: 'min', cssEase: 'linear', prevArrow: '', nextArrow: '', responsive: [ { breakpoint: 767, // when screen width is <= 767px settings: { slidesToShow: 3 } } ] }); }); // ---------------------- We Work Box (JS) ---------------------- // jQuery(function($) { $(window).on('scroll', function() { $('.we-work-box').each(function(index) { const box = $(this); const content = $('.we-work-content').eq(index); const boxTop = box.offset().top; const boxHeight = box.outerHeight(); const scrollTop = $(window).scrollTop(); const windowHeight = $(window).height(); // Calculate visible part of the box const visiblePart = (scrollTop + windowHeight) - boxTop; const halfBox = boxHeight / 2; if (visiblePart >= halfBox && scrollTop < boxTop + boxHeight) { content.addClass('active'); } else { content.removeClass('active'); } }); }); // Trigger on load in case elements already in view $(window).trigger('scroll'); }); //# sourceURL=mfn-scripts-js-after /* ]]> */

  • Aliff Ahmad

    Project Manager

  • Dr. Neevaarthana Subramaniam

    ÿÈÕ´óÈüapp Post-Doctoral Researcher

  • Dr. Surendran Rajaratnam

    Fellow – ÿÈÕ´óÈüapp

  • Dr. Daniella Maryam Mohamed Mokhtar

    Fellow – ÿÈÕ´óÈüapp

    Daniella Mokhtar is a senior lecturer teaching Psychology at the Faculty of Social Sciences and Humanities. She obtained a Bachelor`s Degree in Psychology and Masters in Industrial and Organisational Psychology from Universiti Kebangsaan Malaysia. She completed her Ph.D in Occupational Health Psychology at the University of Sheffield, United Kingdom where she wrote her thesis on workplace bullying.

  • Associate Professor Dr. Emma Mirza Wati Mohamad

    Director

    Emma has 20 years of experience as an academic and a health communication researcher. She is passionate with the role communication to nurture positive health behaviours and strongly believes in the importance of health literacy to empower society in making informed health decisions.

  • Dr. Arina Anis Azlan

    Deputy Director

    Arina Anis Azlan is a lecturer at the Centre for Research in Media and Communication, Faculty of Social Sciences and Humanities, Universiti Kebangsaan Malaysia. Her research interests are in health communication, information management and communicative behaviour among publics. She is currently involved in several research projects focusing on health communication and strategic communication to publics.