From b00ca5ea784581ab949acaa322e8366909d11a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= Date: Fri, 9 Jan 2026 21:03:54 +0300 Subject: [PATCH] Add GSAP Layout and Animated Logo Component: Introduced a new layout file for GSAP integration, enhancing the site's animation capabilities. Added an animated logo component to improve visual engagement. Updated the 'neler-yapariz' template to utilize the new GSAP layout, ensuring a cohesive design and better user experience. --- .../views/components/animated-logo.blade.php | 80 + resources/views/layouts/gsap.blade.php | 33 + resources/views/layouts/site.blade.php | 3 + .../views/templates/neler-yapariz.blade.php | 5721 ++++++++++++++++- 4 files changed, 5826 insertions(+), 11 deletions(-) create mode 100644 resources/views/components/animated-logo.blade.php create mode 100644 resources/views/layouts/gsap.blade.php diff --git a/resources/views/components/animated-logo.blade.php b/resources/views/components/animated-logo.blade.php new file mode 100644 index 0000000..93e1f2d --- /dev/null +++ b/resources/views/components/animated-logo.blade.php @@ -0,0 +1,80 @@ +@props(['class' => '', 'dark' => false, 'width' => '400', 'height' => 'auto']) + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/resources/views/layouts/gsap.blade.php b/resources/views/layouts/gsap.blade.php new file mode 100644 index 0000000..bb5eaf1 --- /dev/null +++ b/resources/views/layouts/gsap.blade.php @@ -0,0 +1,33 @@ + + + + + + + {{ setting('seo_meta_title') }} - {{ $meta['title'] ?? ($settings->default_meta_title ?? config('app.name')) }} + + + + + + @stack('styles') + + + + + + {{-- Main Content --}} + @yield('content') + + + + + + + @stack('scripts') + + diff --git a/resources/views/layouts/site.blade.php b/resources/views/layouts/site.blade.php index 7163d18..95db8e3 100644 --- a/resources/views/layouts/site.blade.php +++ b/resources/views/layouts/site.blade.php @@ -22,6 +22,8 @@ $favicon_path = setting('site_favicon'); + @stack('styles') + {{-- Dynamic Header Template or Static Navbar --}} @@ -118,6 +120,7 @@ $favicon_path = setting('site_favicon'); + @stack('scripts') diff --git a/resources/views/templates/neler-yapariz.blade.php b/resources/views/templates/neler-yapariz.blade.php index 834e8c2..1f1a13b 100644 --- a/resources/views/templates/neler-yapariz.blade.php +++ b/resources/views/templates/neler-yapariz.blade.php @@ -1,15 +1,5714 @@ -@extends('layouts.site', ['header' => 'partials.header', 'footer' => 'partials.footer']) +@extends('layouts.gsap', ['header' => 'partials.header', 'footer' => 'partials.footer']) -@section('title', 'Anasayfa') +@section('title', t('Neler Yapıyoruz?') ?: 'Neler Yapıyoruz?') +@push('styles') + +@endpush + + + + + + +
+ + @section('content') - @include('templates.home.hero') - @include('templates.home.services-cards') - @include('templates.home.why-choose-us') - @include('templates.home.carousel') - - @include('templates.home.solutions') - @include('templates.home.services-grid') - @include('templates.home.testimonials') - @include('templates.home.contact') + +

SCROLL INTERACTIONS
SCROLL INTERACTIONS
SCROLL INTERACTIONS
TEXT EFFECTS
TEXT EFFECTS
SLIDERS
SLIDERS
SLIDERS
SLIDERS
Inertia Inertia
Inertia Inertia
MARQUEES
MARQUEES
MARQUEES
MARQUEES
  • 01

    Hover States

  • 02

    ResizinG Elements

  • 03

    Timeline Control

  • 04

    Shuffling positions

  • 05

    Sequenced Motion

  • 06

    FLEXIBLE LAYOUTS

Create seamless transitions between two visual states smoothly, not instantly. It removes the visual chaos when layouts shift, making things feel smooth, considered, and intentional.

Copy this on Desktop

Start animations when elements enter the viewport, scrub through timelines, pin elements in place, or snap to key points as users scroll.

Copy this on Desktop
  • Precise

    ACTIONS

    GSAP turns clicks into vivid stories with precise motion, making every interaction feel intentional and alive.
  • Focus

    ATTENTION

    GSAP sharpens focus with smooth animations, drawing attention to your message for a lasting, memorable impact.
  • Expressive

    Motion

    GSAP infuses elements with expressive motion, transforming static pages into emotional, engaging journeys.
  • Powerful

    IMPACT

    GSAP delivers animations with powerful impact, ensuring your story resonates clearly and leaves a mark.
  • Seamless

    FLOW

    GSAP crafts seamless flow in motion, syncing with users to create natural, captivating interactions.

Ideal for smooth marquees, auto playing sliders, and loops that just keep rolling.

Copy this on Desktop

Continue movement from a given speed, slow naturally to a stop. Perfect for adding physicality and flow to your interface.

Copy this on Desktop
  • Character Split Reveal
  • Word Split Reveal
  • niiyhgir
    Scramble Text Reveal
  • Alpha Reveal
  • SIide Char Reveal
  • Up and down Reveal

Animate each one independently. It’s all motion, no compromise: screen readers and search engines still see the original text.

Copy this on Desktop
SCROLLTRIGGER
MARQUEE
MARQUEE
SCROLLTRIGGER

Loop endlessly. Stack images, text, or both. Marquees give rhythm to your page without needing a single click.

Copy this on Desktop
X
Bring your site to life with the power of GSAP, now even more seamlessly in Webflow. This template is your starting point to help you harness the magic of GSAP.

No gatekeeping, just a resource at your disposal to start you strong with motion design. Complete with cloneable elements and best-practice tips on when, why and how to use them.

Copy what you need, tweak what you like and get motion into your next build: faster, smoother and better.
©2025
Site by OFF+BRAND.
@endsection + +@push('scripts') + + + + + + + + + + + +@endpush